请问老师，为什么我右边的模块挡着中间的模块了呢？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
.header{background: black url(http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png) no-repeat;
height:90px;
width:100%;
position:fixed;
z-index:999;
}
.header ul{padding-left:400px;}
.header ul li{color:white;
list-style:none;
float:left;
padding:0 20px;
line-height:90px;
}
body{min-width:700px;}
.left,.right,.middle{position:relative;
float:left;
min-height:600px;
}
.container{height:2000px;
padding:0 100px 0 100px;
padding-top:90px;
}
.middle{width:100%;
background:pink;}
.right{background:blue;
width:100px;
margin-right:-100%;
right:100px;
}
.left{background:yellow;
width:100px;
margin-left:-100%;
left:-100px;
}
.footer{ width:100%;
height:80px;
background:black;
bottom:0;
position:fixed;
}
.footer ul{padding-left:200px;}
.footer ul li{color:white;
list-style:none;
float:left;
padding:0 20px;
line-height:80px;
}
.header ul li:hover{color:orange;}
</style>
</head>
<body>
<div class="header">
<ul>
<a href="#"><li>课程</li></a>
<a href="#"><li>职业路径</li></a>
<a href="#"><li>猿问</li></a>
<a href="#"><li>实战</li></a>
<a href="#"><li>手记</li></a>
</ul>
</div>
<div class="container">
<div class="middle"><img src="http://img1.sycdn.imooc.com/climg//590037e00001fab706000400.jpg"/></div>
<div class="left"></div>
<div class="right"></div>
</div>
<div class="footer">
<ul>
<li>网站首页</li>
<li>企业合作</li>
<li>人才招聘</li>
<li>联系我们</li>
<li>常见问题</li>
<li>友情链接</li>
</ul>
</div>
</body>
</html>
正在回答 回答被采纳积分+1
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星