CSS/HTML固定导航栏重叠内容
我制作了一个导航条,它粘在页面顶部,但它粘在一些内容上,我尝试使用CSS/HTML固定导航栏重叠内容,html,css,nav,sticky,Html,Css,Nav,Sticky,我制作了一个导航条,它粘在页面顶部,但它粘在一些内容上,我尝试使用margintop:100px在CSS文件中,但这只会将导航栏向下移动100像素。有人有什么想法吗? CSS .con { overflow: hidden; background: #159B00; width: 1000px; height: 376px; border-radius: 10px; border: 2px solid black; box-shadow:
margintop:100px代码>在CSS文件中,但这只会将导航栏向下移动100像素。有人有什么想法吗?
CSS
.con {
overflow: hidden;
background: #159B00;
width: 1000px;
height: 376px;
border-radius: 10px;
border: 2px solid black;
box-shadow: 0 4px 8px black;
}
.nav {
padding-top: 0px;
background: #fff;
height: auto;
width: 100%;
z-index: 150;
top: o;
position: fixed;
box-shadow: 0 2px 3px rgba(0,0,0,.4);
}
HTML
<div class="nav">
<div id="nav_wraper">
<ul>
<li><a href="RUN ME.html">
</div>
</a></li>
</a>
</li><li>
<a href="index.html">Home</a>
</li><li>
<a href="#">Designs▼</a>
<ul>
</ul>
</li><li>
<a href="#">About▼</a>
<ul>
</ul>
</li><li>
<a href="#">Contact▼</a>
<ul>
</ul>
</li>
</ul>
</div>
</div>
<main>
<div id="iG" class="con" >
<img src="slider.png" alt="" />
<img src="step_1.png" alt="" />
<img src="step_2.png" alt="" />
<img src="step_3.png" alt="" />
<img src="slider.png" alt="" />
</div>
</main>
-
-
-
-
谢谢。您可以通过添加
body{
padding-top:100px;
}
而且你有语法错误
.nav{
top:o;
}
应该是
.nav{
top:0;
}