Question

我正在尝试制作简历/ portofolio类型的网站。我唯一的问题是当我向下滚动时，我的固定导航栏不会重叠我的网站的某些内容（图像和一些进度条）。

这是我的CSS代码：

body {
 padding-top: 70px;
}

#nav {
 list-style-type: none;
 margin: 0;
 padding: 0;
 overflow: hidden;
 background-color: #333;
 position: fixed;
 top: 0;
 width: 100%;

}

#nav li {
 float: left;
}

#nav li a {
 display: block;
 color: white;
 text-align: center;
 padding: 14px 16px;
 text-decoration: none;
 opacity:1;
}

#nav li a:hover:not(.active) {
 background-color: #111;
}

.active {
  background-color: #007ed8;
}

#content{
 margin-top:100px;
 padding:20px;
}

img{
 width:290px;
 height:290px;
}

.margin{
  margin-top:100px;
}

.margin_bar{
  margin-top:6px;
}

a:hover{
 text-decoration:none;
}

这是一个小伙伴，谢谢你的帮助！ https://jsfiddle.net/6wzr6rtc/

Answer 1

只需将z-index 属性添加到{{1>}足够高的值，只是为了确保它始终位于上顶部其他一切，例如：

#nav

Answer 2

将此css添加到导航栏以获取重叠内容。

#nav {
  z-index: 999999;
}

Answer 3

您只需在代码中添加z-index即可。

#nav{
  z-index:9999
}

固定导航栏不重叠我的网站的某些部分

3 个答案: