positon，text-align,margin的定位问题？小弟不太理解
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0; padding: 0;}
.head{width: 100%;height: 90px; background-color: black;
overflow: hidden;
position: fixed;
top: 0;
z-index: 1;}
.head .logo{
width: auto;
height: 90px;
float: left;
}
.head .nav{
float: right;
margin-right: 80px;
}
.head .nav li{
list-style-type: none;
float: left;
font-size: 20px;
line-height: 90px;
color: white;
margin-right: 60px;
}
.head .nav:hover li{cursor:pointer;}
/*内容框架*/
.container{
width: 100%;height: 4000px;
margin-top: 90px;/********老师这里有一个问题*******/
background-color: #00FFCC;
overflow: hidden;
}
/*内容--左半部*/
.container .left{
width: 50%;height: 2000px;
float: left;
position: absolute;
top:400px;
left: 20%;
overflow: hidden;
}
.container .left h4{
font-size: 26px;
font-weight: bold;
margin-bottom: 20px;
}
.container .left .title{
width: auto;
height: auto;
float: left;
}
.container .left .title li{
border: 1px #00FFCC solid;
background-color: pink;
list-style-type: none;
margin-bottom: 5px;
}
.container .left .list{
width: auto;
height: auto;
margin-left: 30px;
float: left;
}
.container .left .list li{
border: 1px #00FFCC solid;
list-style-type: none;
margin-bottom: 5px;
}
/*内容--右半部*/
.container .right{
width: 50%; height:2000px;
position: absolute;
top: 400px;
left: 60%;
float: left;
}
.container .right h4{
font-size: 26px;
font-weight: bold;
margin-bottom: 20px;
}
.container .right div ul li{
border: 1px #00FFCC solid;
list-style-type: none;
margin-bottom: 5px;
float: left;
margin-right: 50px;
}
.container .right .line_1{
overflow: hidden;
}
.container .right .line_2{
overflow: hidden;
}
.container .right .line_3{
overflow: hidden;
}
/*尾部*/
.foot{
width: 100%;height: 80px;background-color: black;
overflow: hidden;
position: fixed;
bottom: 0;
}
.foot .nav_2{
margin-left: 20%;
overflow: hidden;
}
.foot .nav_2 ul li{
list-style-type: none;
font-size: 26px;
font-weight: bold;
color: white;
float: left;
line-height: 80px;
margin-right: 50px;
}
.foot .nav_2:hover li{cursor: pointer;}
}
</style>
</head>
<body>
<div class="head">
<div class="logo">
<img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png">
</div>
<div class="nav">
<ul>
<li>课程</li>
<li>职业路径</li>
<li>实战</li>
<li>猿问</li>
<li>手记</li>
</ul>
</div>
</div>
<div class="container">
<div class="left">
<h4>课程推荐</h4>
<div class="title">
<ul>
<li>职业路径</li>
<li>职业路径</li>
<li>职业路径</li>
<li>职业路径</li>
<li>职业路径</li>
</ul>
</div>
<div class="list">
<ul>
<li>HTML5与CSS3实现网页动态</li>
<li>零基础入门Android语法与界面</li>
<li>IOS基础语法与常用控件</li>
<li>PHP入门开发</li>
<li>JAVA入门开发</li>
</ul>
</div>
</div>
<div class="right">
<h4>相关课程</h4>
<div class="line_1">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JAVASCRIPT</li>
</ul>
</div>
<div class="line_2">
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JQurey</li>
</ul>
</div>
<div class="line_3">
<ul>
<li>移动端基础</li>
<li>移动端APP开发</li>
</ul>
</div>
</dir>
</div>
<div class="foot">
<div class="nav_2">
<ul>
<li>网站首页</li>
<li>企业合作</li>
<li>人才招聘</li>
<li>联系我们</li>
<li>常见问题</li>
<li>友情链接</li>
</ul>
</div>
</div>
</body>
</html>老师我有两个问题想请教：1.我上面备注的地方，我把中间内容部分通过外边框挤出了90px（和头部一样高的）宽度，但是我在设置中间的“课程推荐”内容的时候我通过定位 position：absolute 来定位我内容的位置，当我设置top为0的时候，内容会给头部覆盖。 我自己的理解就是：“position是在可视区域进行调整的，所以设着为top设置为0的时候，会给覆盖。”这样理解对吗？
2.对于底部的居中问题：div，ul，li都是块元素，之前说text-align只对块级元素有效，但是这个text-align却不能实现居中效果；不仅这个我尝试过用margin：0 auto；对页尾进行居中但是也没效果，如果这个不行的话我又不太理解为什么margin-left：20%可以对我页尾列表进行挪动
0
收起
正在回答
1回答
定位元素参照的不是可视区域 , 而是参照离它最近的已定位的祖先元素 ,.如果没有最近的已定位的祖先元素 , 那么元素会参照html定位 , 通俗的说 ,定位元素如果它的祖先元素( 如父元素 , 爷爷元素....)设置了定位 ,它会参照离它最近的祖先元素定位 , 也就是父元素 . 页面找不到div.left的已定位的祖先元素 , 它会根据整个html定位. 所以代码中可给它父元素设置相对定位:
2.text-align主要是针对文本水平对齐 . (同学说的text-align只对块级元素有效是有课程中讲到吗 ? 可以告诉老师一下具体那节课程哦 ) . 可如下设置实现居中
如果使用margin：0 auto；的话需要给ul设置固定宽度:
希望解答了你的疑惑 , 祝学习愉快 ,望采纳
相似问题
登录后可查看更多问答，登录/注册
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星