首页 > 代码库 > position学习终结者(一)
position学习终结者(一)
position的值有以下五种。现结合样例谈一下我对这五种值的认识：
一、不使用不论什么值：
代码1-1例如以下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
.parent{
width:300px;
height:300px;
background-color:gray;
}
.son1{
width:50px;
height:50px;
background-color:green;
}
.son2{
width:50px;
height:50px;
background-color:red;
}
</style>
</head>
<body>
<div class="parent">
<div class="son1">son1</div>
<div class="son2">son2</div>
</div>
</body>
</html>
图1-1
二、static：默认值。
没有定位，元素忽略 top, bottom, left, right 或者 z-index 声明，依照正常的文档流进行排列。
代码2-1例如以下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
.parent{
width:300px;
height:300px;
background-color:gray;
}
.son1{
position:static;
left:60px;
top:60px;
width:50px;
height:50px;
background-color:green;
}
.son2{
width:50px;
height:50px;
background-color:red;
}
</style>
</head>
<body>
<div class="parent">
<div class="son1">son1</div>
<div class="son2">son2</div>
</div>
</body>
</html>
总结：
①、比对图1-1与图2-1能够发现两者没有什么区别，这说明static是position的默认值；
②、上面代码son1 div样式中设置了left和top属性，但从图2能够发现这些属性的设置并没有起到应有的作用。这印证了position为static时会忽略 top, bottom, left, right 或者 z-index 声明
三、relative：这个单词本身是“相关、相对”的意思，从这个单词能够看出该值的作用。只是这里要搞清楚它是相对哪个对象来进行偏移的。
代码3-1例如以下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
.parent{
width:300px;
height:300px;
background-color:gray;
}
.son1{
position:relative;
left:60px;
top:60px;
width:50px;
height:50px;
background-color:green;
}
.son2{
width:50px;
height:50px;
background-color:red;
}
</style>
</head>
<body>
<div class="parent">
<div class="son1">son1</div>
<div class="son2">son2</div>
</div>
</body>
</html>
总结：
①、对照图1-1代码和图3-1代码，对照图1-1和图3-1，能够得出这样的结论：son1是相对它原来的位置进行偏移的；
②、哪些属性能够设置son1的偏移位置：top、right、bottom、left都能够做到。
③、son1和son2属于同级。son1偏移后，那son2偏移了吗？son2没有偏移。它依旧在原来的位置，事实上①已经能够回答这个问题了。能够这样理解：假设没有设置position的值。son1的位置会依照正常的文档流进行排列。假设设置son1 position属性的值为relative。son1的位置会依照top、right、bottom、left的值进行位置偏移，这样的偏移是相对它原来的位置进行的（relative的“相对的”意思也正体现于此）；
④、假设为son2也加入position的值为relative并加入left等属性，会发生什么？通过①能够回答这个问题：会依照son2原来的位置进行相对的偏移，还是那句话——这里的“相对”是与原来的位置相比。
⑤、呵呵呵，上面几点中有三点提到了“原来的位置”，那么它相对于原来位置的哪个部位偏移的呢？中心吗？不是的，relative的偏移是基于对象的margin的左上側的来说的；
四、absolute：毫不掩饰，当初学习这块儿时。就是这个absolute把我弄懵了，呵呵呵。以下通过样例来一层层的理解这个absolute（注意：为了更好地理解absolute值。请先“忘掉前面讲的一切”）：
代码4-1例如以下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
body{
margin:0px;
background-color:gray;
}
.son1{
width:50px;
height:50px;
background-color:green;
}
.son2{
width:50px;
height:50px;
background-color:red;
}
</style>
</head>
<body>
<div class="son1">son1</div>
<div class="son2">son2</div>
</body>
</html>
说明：观察代码4-1可知上图中没有使用position属性，也就是说position属性的值为static。
代码4-2例如以下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
body{
margin:0px;
background-color:gray;
}
.son1{
position:relative;
left:150px;
width:50px;
height:50px;
background-color:green;
}
.son2{
width:50px;
height:50px;
background-color:red;
}
</style>
</head>
<body>
<div class="son1">son1</div>
<div class="son2">son2</div>
</body>
</html>
说明：比对代码4-1和代码4-2。能够看到唯一变化的地方就是son1的样式加入了“position:relative;left:150px;”；
代码4-3例如以下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
body{
margin:0px;
background-color:gray;
}
.son1{
position:absolute;
left:150px;
width:50px;
height:50px;
background-color:green;
}
.son2{
width:50px;
height:50px;
background-color:red;
}
</style>
</head>
<body>
<div class="son1">son1</div>
<div class="son2">son2</div>
</body>
</html>
说明：比对代码4-2和代码4-3，能够看到唯一变化的地方就是son1的样式position的属性值有relative改为了absolute。
总结：
①、对照图4-2和图4-3可以非常轻易的得出relative和absolute的一个区别：relative所作用的元素移动后。原来的位置没有被其他元素占用；absolute所作用的元素移动后，原来的位置会被其他元素占用。
②、absolute影响的元素移动后之所以会被其他元素占用是因为被absolute影响的元素脱离了文档流。不在自上而下、自左而右的显示元素。而还有一个元素（son2）则没有脱离文档流。这时没有脱离文档流的元素直接从父元素（body相对于son2而言是父元素）開始定位，即言没有脱离文档流的元素（son2）的文档流不再基于absolute影响的元素（son1）而是基于父元素定位。于是就看到了这样的情形；
代码4-4例如以下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
body{
margin:0px;
background-color:gray;
}
.parent{
margin-left:50px;
width:300px;
height:300px;
background-color:yellow;
}
.son1{
position:absolute;
left:150px;
width:50px;
height:50px;
background-color:green;
}
.son2{
width:50px;
height:50px;
background-color:red;
}
</style>
</head>
<body>
<div class="parent">
<div class="son1">son1</div>
<div class="son2">son2</div>
</div>
</body>
</html>
说明：观察代码4-4可知class为parent的div没有使用position属性，也就是说其position属性的值为static；
代码4-5例如以下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
body{
margin:0px;
background-color:gray;
}
.parent{
position:absolute;
margin-left:50px;
width:300px;
height:300px;
background-color:yellow;
}
.son1{
position:absolute;
left:150px;
width:50px;
height:50px;
background-color:green;
}
.son2{
width:50px;
height:50px;
background-color:red;
}
</style>
</head>
<body>
<div class="parent">
<div class="son1">son1</div>
<div class="son2">son2</div>
</div>
</body>
</html>
说明：观察代码4-5可知class为parent的div的position属性的值为absolute；
代码4-6例如以下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
body{
margin:0px;
background-color:gray;
}
.parent{
position:relative;
margin-left:50px;
width:300px;
height:300px;
background-color:yellow;
}
.son1{
position:absolute;
left:150px;
width:50px;
height:50px;
background-color:green;
}
.son2{
width:50px;
height:50px;
background-color:red;
}
</style>
</head>
<body>
<div class="parent">
<div class="son1">son1</div>
<div class="son2">son2</div>
</div>
</body>
</html>
说明：观察代码4-6可知class为parent的div的position属性的值为relative。
代码4-7例如以下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
body{
margin:0px;
background-color:gray;
}
.parent{
position:fixed;
margin-left:50px;
width:300px;
height:300px;
background-color:yellow;
}
.son1{
position:absolute;
left:150px;
width:50px;
height:50px;
background-color:green;
}
.son2{
width:50px;
height:50px;
background-color:red;
}
</style>
</head>
<body>
<div class="parent">
<div class="son1">son1</div>
<div class="son2">son2</div>
</div>
</body>
</html>
总结：
①、对照图4-4、图4-5、图4-6和图4-7能够非常轻易的得出这样一个结论：假设某一absolute作用的元素（比方：上面的son1）的父对象(或曾祖父，仅仅要是父级对象（比方上面class为parent的div）)设置了position属性且position的属性值为absolute、relative或者fixed，那么这个子元素（比方：上面的son1）会參照离它（指子元素）近期的且position的属性值为absolute、relative或者fixed的父元素（比方上面class为parent的div）进行定位，但是以父元素哪个定位点来进行定位呢，答案是父元素的左上角（永远都是父元素的左上角，假设父元素样式中有padding也是这样，这一点可參考还有一篇博客——《HTML CSS——position学习终结者(二)》）。假设子元素（比方：上面的son1）的全部父元素的position属性值不为absolute、relative或者fixed，那么该子元素将以body为定位对象进行定位，图4-4非常好的演示了这一点（注意：单单就子元素而言图4-4和图4-3是一样的，它们參照定位对象都是body）；
②、因为将元素position属性设置为absolute后，会导致该元素脱离文档流。就像它不属于父对象一样，它漂浮了起来，在DreamWeaver中把它称为“层”，事实上意思是一样的；
五、fixed：fixed是特殊的absolute。position属性值为fixed的元素总是以body元素为定位对象（即依照浏览器的窗体进行定位）通过"left"、"top"、"right"或"bottom" 属性进行规定，即使拖动滚动栏，该元素所在的位置也不会改变的（与background-attachment:fixed类似）。
六、inherit：该属性作用的元素继承父元素position的属性值。因为该属性在不论什么的版本号的 Internet Explorer （包含 IE8）都不支持，所以能够忽略它。
【0分下载演示资源】
position学习终结者(一)