如何防止div的垂直重疊

我一直在爲網站設計佈局，但我一直有一些div重疊的問題。我一直在研究如何防止這種情況，並試圖使用彈性盒，但如果我正確使用它們，我仍然沒有看到結果。如何防止div的垂直重疊

因爲我不確定什麼是相關的，我只是要分享我的HTML的正文。

<body id="body"> 

    <div id="float"> 

    <div> 
     <div><strong>Home</strong></div> 
     <div><strong>Team</strong></div> 
     <div><strong>Projects</strong></div> 
     <div><strong>Contact</strong></div> 
    </div> 

    </div> 

    <!-- Background Logo --> 
    <div id="background"> 
    </div> 
    <!--End Background Logo --> 

    <!-- Main Navigation Menu - Top of screen. --> 
    <div id="NavigationMenu"> 
    <ul style="list-style-type: none;"> 
     <li><strong>Home</strong></li> 
     <li><strong>Team</strong></li> 
     <li><strong>Projects</strong></li> 
     <li><strong>Contact</strong></li> 
    </ul> 
    </div> 
    <!-- Main Navigation Menu - Top of screen. --> 

    <!-- Page Content --> 

    <div id="content-main"> 

    <h1>hello world</h1> 
    <p>hello world </p> 

    </div> 
    <div id="relevant-links"> 
    <p>Hello World</p> 
    </div> 

    <!-- Page Content --> 
</body>

而CSS

#body { 
    background-color: #355e72; 
    color: #231F20; 
    display: flex; 
    flex-flow: column; 
    height: 100%; 
} 

#background { 
    background-image: url(../Images/IncitementStudio-Logo-Color.png); 
    background-repeat: no-repeat; 
    background-size: contain; 
    padding-left: 80%; 
    padding-bottom: 48%; 
    position: absolute; 
    display: block; 
} 

#NavigationMenu { 
    padding-bottom: 25%; 
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; 
    padding-left: 35%; 
    padding-top: 16%; 
    font-size: 2.5vw; 
    position: absolute; 
} 

#float { 
    text-align: center; 
    color: gray; 
    padding-top: 9%; 
    margin-top: -10%; 
    padding-bottom: 100%; 
    margin-left: 85%; 
    list-style-type: none; 
    width: 15%; 
    background-color: #203A46; 
    position: fixed; 
    z-index: 999; 
} 

#float strong { 
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; 
    font-size: 3vw; 
} 

#float div div { 
    border: solid gray; 
    border-top: 0px; 
    border-left: 0px; 
    border-right: 0px; 
    padding: 10% 10% 10% 10% 
} 

#content-main { 
    position: absolute; 
    top: 80%; 
    background-color: #2B4F60; 
    width: 100%; 
    display: block; 
    margin: -1%; 
    padding-left: 2.5%; 
    padding-bottom: 1vh; 
} 

#content-main h1 { 
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; 
} 

#content-main p { 
    width: 80%; 
} 

#footer p { 
    color: gray; 
} 

#relevant-links { 
    position: absolute; 
    background-color: #203A46; 
    display: block; 
    flex-flow: column; 
    margin-left: -1%; 
    padding-left: 2%; 
    top: 100%; 
    width: 86%; 
    height: auto; 
} 

#relevant-links p { 
    width: 80%; 
}

我提出了一個副本上的jsfiddle我的HTML/CSS，以及：https://jsfiddle.net/Ld3jp7g3/1/

在Dreamweaver中，實時取景，似乎表明身體只佔跨頁面的五分之一左右。這可能是問題的一部分嗎？爲什麼會發生這種情況，我該如何解決這個問題？

來源

2017-03-01 dnallohleoj

歡迎來到StackOverflow！你正在使用一噸基於百分比的填充和邊距，這就解釋了爲什麼你會得到div重疊。你幾乎所有的東西都使用'position：absolute'和'position：fixed'，這將使得響應式網站的工作變得非常困難。我建議研究如何使用Bootstrap或Foundation等框架來幫助您瞭解如何將元素放置在頁面上。從本質上講，你的側邊欄應該是一個單欄，其餘的內容應該在另一個更大的欄:) –

-1

我發現你的代碼有一些直接的問題。

首先：您有很多百分比邊距和填充。請記住，百分比是相對於貨櫃。

其次：

position: absolute

和

position: fixed

和

display: block

一般都是不好的想法與Flexbox的工作時。當您使用Flex時，它具有Flex元素的這些屬性的版本。查看this site以獲取有關Flex的幫助。我一直使用它，這是一個很好的參考。

希望有幫助！

來源

2017-03-02 00:50:41

如何防止div的垂直重疊

回答

相關問題