这样写有问题吗？为啥把.header下的z-index注释掉，body就会将header覆盖掉呢？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
*{margin:0;
padding:0;}
.container{width:100%;
}
.header{background:black;
width:100%;
height:100px;
position:fixed;
top:0;
color:white;
font-size:20px;
z-index: 1;
zoom:1;
}
.nav{position:absolute;
line-height:100px;
top:0;
right:0;
}
.nav li{display:inline-block;
margin:0 40px;
}
.body{
padding:0 400px;
height:1000px;
position: relative;
}
.middle{background:pink;
width:100%;
height:1000px;
position: relative;
float: left;
}
.middle img{width:400px;
height:400px;
display:block;
position:absolute;
top:50%;
left:50%;
margin-top:-200px;
margin-left:-200px;
}
.left,.right{width: 400px;
height: 1000px;
position: relative;
float: left;
padding-top:100px;}
.left{background: rgb(255,239,219);
margin-left: -100%;
left:-400px;
font-family: "宋体"}
.right{background: rgb(173,216,230);
margin-left: -400px;
left:400px;}
.left h2{margin-top: 200px;
margin-left:100px;}
.right h2{margin-top: 200px;
margin-left:10px;}
.left li{margin-top:30px;
margin-left: 100px;
list-style: none;
}
.right div{margin-top:30px;
margin-left:10px;}
.footer{background:black;
width:100%;
height:100px;
position:fixed;
bottom:0;
color:white;
font-size:20px;}
.link{line-height:100px;
text-align:center;
}
.link li{display:inline-block;
margin:0 40px;}
span{background:pink;}
input{width: 220px;height: 30px;}
.login-button{background: red;
width: 224px;
height:35px;
text-align: center;
line-height: 35px;
cursor: pointer;}
a:link{color:white;text-decoration:none;}
a:visited{color:white;}
a:hover{color:orange;cursor:pointer;}
a:active{color:#333;}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="container">
<div class="header">
<img src="http://img1.sycdn.imooc.com/climg//590037f600016ce303000100.png"/>
<ul class="nav">
<li><a href="#">课程</a></li>
<li><a href="#">职业路径</a></li>
<li><a href="#">实战</a></li>
<li><a href="#">猿问</a></li>
<li><a href="#">手记</a></li>
</ul>
</div>
<div class="body">
<div class="middle">
<img src="http://img1.sycdn.imooc.com/climg//590037e00001fab706000400.jpg"/>
</div>
<div class="left">
<h2>课程推荐</h2>
<ul>
<li> <span>职业路径</span> HTML5与CSS3实现动态网页</li>
<li> <span>职业路径</span> 零基础入门Adroid语法与界面</li>
<li> <span>职业路径</span> iOS基础语法与常用控件</li>
<li> <span>职业路径</span> PHP入门开发</li>
<li> <span>职业路径</span> JAVA入门开发</li>
</ul>
</div>
<div class="right">
<h2>登录</h2>
<div><input type="text" name="login-name" placeholder="请输入登录邮箱/手机号"/></div>
<div><input type="password" name="psw" placeholder="6-16位密码，区分大小写，不能用空格" maxlength="16"/></div>
<div class="login-button"><a href="#">登录</a></div>
</div>
</div>
<div class="footer">
<ul class="link">
<li><a href="#">网页首页</a></li>
<li><a href="#">企业合作</a></li>
<li><a href="#">人才招聘</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">常见问题</a></li>
<li><a href="#">友情链接</a></li>
</ul>
</div>
</div>
</body>
</html>
正在回答
同学，你好。这里把.header下的z-index注释掉，body就会将header覆盖的原因是，header设置了固定定位，会脱离文档流，在文档中不占据位置。因此会被body给覆盖掉。如图：
需要给header设置大于body的层级值，才会让header显示在上层。
祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星