为什么我的页头和页脚的position设成fixed页头就会被下面的遮住
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin: 0;padding: 0;}
a{text-decoration: none;}
.big{width: 100%;height: 100px;background: black;position: fixed;}
.tit-li{float: right;width: auto;color:white;font-size: 30px;line-height: 100px;margin-right: 100px;}
.logo{float: left;}
.foot{width:100%;height: 100px;background: black;position: fixed;bottom: 0px;}
.foot-ul{margin:0 auto;width: 1100px;}
.foot-li{color:white;font-size: 30px;line-height: 100px;margin-right: 100px;float: left;}
.foot-li:nth-child(5){margin-right: 0px;}
.contenter{padding: 0 400px 0 400px;min-height: 800px;}
.main,
.left,
.right{float: left;position: relative;}
.main{width: 100%;background: rgb(250,250,100);min-height: 800px;}
.left{width: 400px;margin-left: -100%;min-height: 800px;background: rgb(180,250,110);left: -400px;padding-top: 100px;font-size: 20px;line-height: 80px;}
.h3-li{background: pink;}
.right{width: 400px;margin-left: -400px;min-height: 800px;background: rgb(110,120,200);right: -400px;padding-top: 100px;}
.img{width: 600px;height: 400px;margin:200px auto;}
.input{width: 300px;height: 50px;position: relative;left: 40px;}
.submit{width: 300px;height: 50px;background: red;position: relative;left: 40px;}
</style>
</head>
<body>
<div class="big">
<div class="logo">
<img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png">
</div>
<div class="tit">
<div class="tit-li">手记</div>
<div class="tit-li">猿问</div>
<div class="tit-li">实战</div>
<div class="tit-li">职业路径</div>
<div class="tit-li">课程</div>
</div>
</div>
<div class="contenter">
<div class="main">
<div class="img">
<img src="http://img1.sycdn.imooc.com/climg//590037e00001fab706000400.jpg">
</div>
</div>
<div class="left">
<h1>课程推荐</h1>
<p><span class="h3-li">职业路径</span> HTML5与CSS3实现动态网页</p>
<p><span class="h3-li">职业路径</span> HTML5与CSS3实现动态网页</p>
<p><span class="h3-li">职业路径</span> HTML5与CSS3实现动态网页</p>
<p><span class="h3-li">职业路径</span> HTML5与CSS3实现动态网页</p>
<p><span class="h3-li">职业路径</span> HTML5与CSS3实现动态网页</p>
</div>
<div class="right">
<h1> 登录</h1>
<br><br>
<form>
<input class="input" type="" name="" value="" placeholder="请输入登录邮箱/手机号">
<br><br>
<input class="input" type="text" name="" value="" placeholder="请输入密码">
<br><br>
<input class="submit" type="submit" value="提交">
</form>
</div>
</div>
<div class="foot">
<div class="foot-ul">
<div class="foot-li">网站首页</div>
<div class="foot-li">网站首页</div>
<div class="foot-li">网站首页</div>
<div class="foot-li">网站首页</div>
<div class="foot-li">网站首页</div>
</div>
</div>
</body>
</html>
正在回答 回答被采纳积分+1
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星