2017-03-01 139 views
0

我一直在为网站设计布局,但我一直有一些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中,实时取景,似乎表明身体只占跨页面的五分之一左右。这可能是问题的一部分吗?为什么会发生这种情况,我该如何解决这个问题?

+1

欢迎来到StackOverflow!你正在使用一吨基于百分比的填充和边距,这就解释了为什么你会得到div重叠。你几乎所有的东西都使用'position:absolute'和'position:fixed',这将使得响应式网站的工作变得非常困难。我建议研究如何使用Bootstrap或Foundation等框架来帮助您了解如何将元素放置在页面上。从本质上讲,你的侧边栏应该是一个单栏,其余的内容应该在另一个更大的栏:) –

回答

-1

我发现你的代码有一些直接的问题。

首先:您有很多百分比边距和填充。请记住,百分比是相对于货柜

其次:

position: absolute 

position: fixed 

display: block 

一般都是不好的想法与Flexbox的工作时。当您使用Flex时,它具有Flex元素的这些属性的版本。查看this site以获取有关Flex的帮助。我一直使用它,这是一个很好的参考。

希望有帮助!