|
了。
3 </div>
子绝父绝、子绝父相、子绝父固，都是可以给儿子定位的。但是，工程上子绝、父绝，没有一个盒子在标准流里面了，所以页面就不稳固，没有任何实战用途。工程上，“子绝父相”有意义，父亲没有脱标，儿子脱标在父亲的范围里面移动。
1 <div class=”box1”> → 绝对定位
2 <div class=”box2”> → 相对定位
3 <div class=”box3”> → 没有定位
4 <p></p> → 绝对定位，以box2为参考定位。
5 </div>
6 </div>
7 </div>
● 绝对定位的儿子，无视参考的那个盒子的padding。
下图中，绿色部分是div的padding，蓝色部分是div的内容区域。那么此时，div相对定位，p绝对定位。
p将无视父亲的padding，在border内侧为参考点，进行定位：
3.4 绝对定位的盒子居中
绝对定位之后，所有标准流的规则，都不适用了。所以margin:0 auto;失效。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
div{
width: 400px;
height: 60px;
background-color: green;
position: absolute;
left: 50%;
margin-left: -200px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
1 width: 600px;
2 height: 60px;
position: absolute;
3 left: 50%;
4 top: 0;
5 margin-left: -300px; → 宽度的一半
非常简单，当做公式记忆下来。就是left:50%; margin-left:负的宽度的一半。
四、固定定位
固定定位，就是相对浏览器窗口定位。页面如何滚动，这个盒子显示的位置不变。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
p{
width: 100px;
height: 100px;
background-color: orange;
position: fixed;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<p></p>
<img src="images/2.jpg" alt="" />
</body>
</html>
固定定位脱标！
案例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
/*为什么要写这个？*/
/*不希望我们的页面被nav挡住*/
padding-top: 60px;
/*IE6不兼容固定定位，所以这个padding没有什么用，就去掉就行了*/
_padding-top:0;
}
.nav{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background-color: #333;
z-index: 99999999;
}
.inner_c{
width: 1000px;
height: 60px;
margin: 0 auto;
}
.inner_c ul{
list-style: none;
}
.inner_c ul li{
float: left;
width: 100px;
height: 60px;
text-align: center;
line-height: 60px;
}
.inner_c ul li a{
display: block;
width: 100px;
height: 60px;
color:white;
text-decoration: none;
}
.inner_c |
