position属性
用来对元素进行定位
absolute
absolute 是最棘手的position值。 absolute 与 fixed 的表现类似，但是它不是相对于视窗而是相对于最近的“positioned”祖先元素。如果绝对定位（position属性的值为absolute）的元素没有“positioned”祖先元素，那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动。记住一个“positioned”元素是指 position 值不是 static 的元素。
fixed
一个固定定位元素不会保留它原本在页面应有的空隙（脱离文档流）。
relative
在一个相对定位（position属性的值为relative）的元素上设置 top 、 right 、 bottom 和 left 属性会使其偏离其正常位置。其他的元素的位置则不会受该元素的影响发生位置改变来弥补它偏离后剩下的空隙。
static
static 是默认值。任意 position: static; 的元素不会被特殊的定位。一个 static 元素表示它不会被”positioned”，一个 position 属性被设置为其他值的元素表示它会被”positioned”
定位的意义
定位允许你定义元素框相对于其正常位置应该出现的位置、相对于父元素、相对于另一个元素、相对于浏览器窗口本身的位置。
定位分为
绝对定位和相对定位。
相对定位
如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
<html>
<head>
<style type="text/css">
div{
width: 50px;
height:50px;
background: #00ff00;
border:1px solid black;
}
</style>
</head>
<body >
<div></div>
<div style="position:relative; left:15px; top:10px;background:#ff00ff"></div>
<div></div>
</body>
</html>
由结果可知，移动后其他图片位置不会变化。被定位元素相对于自己初始的位置定位。
绝对定位
设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
<html>
<head>
<style type="text/css">
div{
width: 50px;
height:50px;
background: #00ff00;
border:1px solid black;
}
</style>
</head>
<body style="position:relative;">
<div></div>
<div style="position:absolute; left:15px; top:10px;background:#ff00ff"></div>
<div></div>
</body>
</html>
由结果可知，其他元素的位置移动，被定位元素相对于父元素定位。
399
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
