如何防止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中,实时取景,似乎表明身体只占跨页面的五分之一左右。这可能是问题的一部分吗?为什么会发生这种情况,我该如何解决这个问题?
答
我发现你的代码有一些直接的问题。
首先:您有很多百分比边距和填充。请记住,百分比是相对于货柜。
其次:
position: absolute
和
position: fixed
和
display: block
一般都是不好的想法与Flexbox的工作时。当您使用Flex时,它具有Flex元素的这些属性的版本。查看this site以获取有关Flex的帮助。我一直使用它,这是一个很好的参考。
希望有帮助!
欢迎来到*!你正在使用一吨基于百分比的填充和边距,这就解释了为什么你会得到div重叠。你几乎所有的东西都使用'position:absolute'和'position:fixed',这将使得响应式网站的工作变得非常困难。我建议研究如何使用Bootstrap或Foundation等框架来帮助您了解如何将元素放置在页面上。从本质上讲,你的侧边栏应该是一个单栏,其余的内容应该在另一个更大的栏:) –