CSS/HTML 固定导航栏重叠内容
CSS/HTML fixed nav bar overlapping content
我制作了一个固定在页面顶部的导航栏,但它仍然固定在某些内容上,我尝试在 CSS 文件中使用 margin-top: 100px;
,但这只是将导航栏向下移动 100 像素。谁有想法?
Link to js fiddle
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;
}
我制作了一个固定在页面顶部的导航栏,但它仍然固定在某些内容上,我尝试在 CSS 文件中使用 margin-top: 100px;
,但这只是将导航栏向下移动 100 像素。谁有想法?
Link to js fiddle
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;
}