重疊Div問題

嗨我試圖製作一個網絡漫畫網站。我目前的問題是，我有
兩個重疊的Div，我不知道該怎麼做來解決這個問題。我的代碼的特定重疊部分是內容div和版權容器。在我的CSS中，我的內容距離top-nav-bar的頂部20px。我試圖弄清楚如何保留這個保證金，並使內容部門不會移動到版權部門。我提供了HTML，我希望是相關的CSS。如果您需要更多信息，請告訴我，我將非常樂意提供。重疊Div問題

#content { 
 
    width: 1100px; 
 
    height: 1500px; 
 
    margin: 0 auto; 
 
    position: relative; 
 
    top: 10px; 
 
    background-color: #666; 
 
    box-shadow: 0 0 10 px 0px rgba(12, 3, 25, 0.8); 
 
    clear: both; 
 
    display: inline-block; 
 
} 
 

 
.copyright-container { 
 
    margin: 0 auto; 
 
    position: ralative; 
 
    text-align: center; 
 
    padding: 0px; 
 
} 
 

 
#wrapper { 
 
    background-color: #333; 
 
    margin: 0 auto; 
 
    max-width: 100%; 
 
    width: 100%; 
 
    height: auto; 
 
    min-height: 100%; 
 
    background-image: url("images/bg-tileable.png"); 
 
    background-position: left-top; 
 
    background-repeat: repeat; 
 
} 
 

 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
    /*border: 1px solid rgba(0, 0, 0, 0.3);*/ 
 
    border-sizing: border-box; 
 
    font-family: 'Roboto', sans-serif; 
 
    color: #FFF; 
 
}

<div id="wrapper"> 
 

 
    <!--Site Image Banner --> 
 
    <header> 
 
    <img src="images/banner06.png" /> 
 
    <img class="logo" src="images/logo.png" /> 
 
    <!-- 
 
\t \t \t <div class = "logo"> 
 
\t \t \t \t <img src="images/logo.png"/> 
 
\t \t \t </div> 
 
\t \t \t --> 
 
    </header> 
 

 
    <!--Navigation bar below header Graphic --> 
 
    <nav class="top-nav-bar"> 
 
    <ul class="nav-list"> 
 
     <li class='active'><a href="#">Home</a></li> 
 
     <li><a href="#">Comics</a></li> 
 

 
     <li><a href="#">Comissions</a></li> 
 
     <li><a href="#">Tutorials</a></li> 
 
    </ul> 
 
    </nav> 
 

 
    <!-- Holds side panel outside links--> 
 
    <div id="outside-links-container"> 
 
    <div class="title"> 
 
     <h3> 
 
     <p class="title-text"> Other Works</p> 
 
     </h3> 
 
    </div> 
 
    <nav class="outside-links"> 
 
     <!--Make Deviantart Logo and add <img> element --> 
 
     <li> 
 
     <a href="#" target="_blank" alt="Link my Deviantart"> <img src="images/da-logo02.png" /></a> 
 
     </li> 
 
     <!--Make Instagram Logo and add <img> element --> 
 
     <li> 
 
     <a href="#" target="_blank" alt="Link my Instagram"><img src="images/ig-logo.png" /></a> 
 
     <li> 
 
    </nav> 
 
    </div> 
 

 
    <!--Holds Comic Page and comic page Navigation --> 
 
    <div id="content"> 
 
    <div class="title"> 
 
     <h1> 
 
     <p class="title-text"> Omnibreed Page 01</p> 
 
     </h1> 
 
    </div> 
 
    <div class="recent-post"> 
 
     <img class="comic-page" src="images/comic-pages/Chap01_Page 1_Low.png" /> 
 
    </div> 
 

 
    <div class=" comic-navigation"> 
 
     <ul class="comic-nav-list"> 
 
     <li> 
 
      <a href="#"><img src="images/arrow01.png" /></a> 
 
     </li> 
 
     <li> 
 
      <a href="#"><img src="images/arrow02.png" /></a> 
 
     </li> 
 
     <li> 
 
      <a href="#"><img src="images/archieve01.png" /></a> 
 
     </li> 
 
     <li> 
 
      <a href="#"><img src="images/arrow03.png" /></a> 
 
     </li> 
 
     <li> 
 
      <a href="#"><img src="images/arrow04.png" /></a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="copyright-container"> 
 
    <p class="copyright"> &#169;Copyright 2017 Charles </p> 
 
    <div>

來源

2017-02-28 Omnis

這將是一個很大更多的幫助，如果你撇去了你代碼來複制這個問題。閱讀一段文字（主要是破碎和不相關的）會讓很多人（比如我自己）對幫助不感興趣。 –

我真的認爲把HTML的大部分可能是相關的，因爲我不確定我可能會破壞我的代碼。另外我，我試圖刪除代碼這就是爲什麼我只把最相關的CSS，至少據我所知。所以如果你對幫助感興趣，我很抱歉，但我不確定如何進一步減少代碼。如果你能擺脫自己的不感興趣，也許可以提供一些見解。不要試圖不尊重，也不確定你是否只是尋求幫助。如果你說不出來，有點新。 – Omnis

基本上你可以刪除你的包裝中的所有東西，然後設置它的寬度和高度，看看會發生什麼。但我認爲，從你的CSS瀏覽，'＃content'大於包裝的100％。出於某種原因，您已經爲其設置了高度和寬度。 –

你拼錯相對

.copyright-container { 
    margin: 0 auto; 
    position: ralative; 
    text-align: center; 
    padding: 0px; 
}

嘗試修復它，看看你是否得到不同的結果

來源

2017-02-28 04:00:47

感謝您的追捕。我修正了這個問題，文本現在在div上方，但是元素仍然重疊。從我可以告訴元素實際上移動到其包含的div之外。 content div在包裝div之外。 – Omnis

嘗試使用容器的絕對位置。這將是相對於包裝 –

重疊Div問題

回答

相關問題