我有一个带有五个按钮的导航器，它们相互叠加显示。我已将高度设置为只有一个按钮的高度，我的溢出设置为可见。四个按钮显示在我的导航下方的div上面，就像他们应该的那样。但是，这些按钮会将我的div中的元素向下移动，而不会在其上显示。如果您感到困惑，可以在本文的底部看到我对JSFiddle链接的意思。 我想要的是导航中的最后四个按钮重叠它下面的任何东西而不抵消它。
这是我的html：
<body>
<div id="mobile"></div>
<nav>
<ul id='nav'>
<li><a href="index.html"><icon><img src="images/home-icon.png"></icon>Home</a></li>
<li><a href="skillsets.html"><icon><img src="images/skills-icon.png"></icon>Skillsets</a></li>
<li><a href="gallery.html"><icon><img src="images/gallery-icon.png"></icon>Gallery</a></li>
<li><a href="about.html"><icon><img src="images/about-icon.png"></icon>About</a></li>
<li><a href="contact.html" style='border-right:1px solid black;'><icon><img src="images/contact-icon.png"></icon>Contact</a></li>
</ul>
</nav>
<div id="main">
<h1>Test</h1>
<h2>Test</h2>
<p>Test</p>
</div>
</body>
这是我的CSS：
/***
Style sheet template for all web sites
****/
/*Fix display for old browsers*/
header, nav, footer, section, article, aside{
display:block;
}
/*Reset Browser Defaults*/
body, div, header, nav, footer, section, article, aside, h1, h2, h3, h4, h5, h6, p, ul, ol, li{
margin:0;
padding:0;
}
body{
background-color:#fff;
color:#000;
font-size:14px;
font-family:Arial;
text-decoration:none;
}
/*CSS properties for document*/
header{
padding:2%;
position:relative;
margin:0 0 0px 0;
color:rgba(255, 255, 255, .9);
}
header h1{
font-size:64px;
}
header div#mobile{
height:0px;
display:block;
}
#logo_div{
min-height:84%;
min-width:26%;
max-height:84%;
max-width:26%;
position:relative;
margin-bottom:1%;
}
#logo_div img{
position:absolute;
top:0;
left:0;
float:right;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
display:block;
height:100%;
}
img.logo{
z-index:99;
border:2px solid black;
}
header img.logo:hover {
opacity: .8 !important;
border:2px solid darkgray;
}
nav{
background-color:rgba(195, 165, 131, .0);
text-align:justify;
margin:auto;
width:94%;
height:27px;
overflow:visible;
float:none;
margin-top:2%;
margin-bottom:2%;
position:relative;
font:Calibri, 'Asul', serif, "Times New Roman", Times;
font-size:.7em;
-moz-box-sizing:borderbox;
-webkit-box-sizing:borderbox;
box-sizing:borderbox;
z-index:10;
}
nav ul{
height:27px;
overflow:visible;
}
nav ul li{
list-style-type:none;
}
nav a{
width:100%;
height:27px;
margin:0;
padding:0;
float:left;
-moz-box-sizing:border-box;
-wbkit- box-sizing:border-box;
box-sizing:border-box;
border-top: 1px solid #d4b873;
background: #d6ba65;
background: -webkit-gradient(linear, left top, left bottom, from(#8c7738), to(#d6ba65));
background: -webkit-linear-gradient(top, #8c7738, #d6ba65);
background: -moz-linear-gradient(top, #8c7738, #d6ba65);
background: -ms-linear-gradient(top, #8c7738, #d6ba65);
background: -o-linear-gradient(top, #8c7738, #d6ba65);
padding:0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 2em;
font-family: Georgia, serif;
text-decoration: none;
vertical-align: middle;
text-align: left;
text-align:left;
-moz-box-sizing:borderbox;
-webkit-box-sizing:borderbox;
box-sizing:borderbox;
border:none;
}
nav a:hover{
background: #785a28;
color: #ccc;
}
nav a:active{
border-top-color: #5c441b;
background: #5c441b;
}
icon{
display:inline-block;
vertical-align:top;
margin-right:10px;
padding:0;
position:relative;
height:100%;
width:27px;
background-color:rgba(255, 255, 255, .4);
}
icon img{
width:60%;
margin:20%;
}
#main{
background-color:red;
width:100%;
float:none;
margin:auto;
padding:20px;
text-align:justify;
-moz-box-sizing:border-box;
-wbkit- box-sizing:border-box;
box-sizing:border-box;
}
div#main img{
width:320px;
margin-top:15px;
}
#main h1{
background-color:red;
}
#main h2{
background-color:green;
margin:5px 10px -5px 4px;
color:#444;
}
div#main h3{
font-size:16px;
}
#main p{
background-color:blue;
margin:10px 2%;
font-size:14px;
}
#main ul li{
list-style-type:disc;
margin:0px 0px 4px 36px;
font-size: 15px;
}
#main ul li a{
text-decoration:none;
}
这是JSFiddle