本文转自http://www.cnblogs.com/zhongxinWang/p/3233167.html
Position属性
Position的属性值共有四个static、relative、absolute、fixed。
Static
所有元素在默认的情况下position属性均为static，而我们在布局上经常会用到的相对定位和绝对定位常用的属性top、bottom、left、right。在position为static的情况下无效。其用法为：在改变了元素的position属性后可以将元素重置为static让其回归到页面默认的普通流中。
Relative
我们此前说过每个元素在页面的普通流中会有“占用”一个位置，这个位置可以理解为默认位置，而相对定位就是将元素偏离元素的默认位置，但****普通流中依然保持着原有的默认位置，并没有脱离****普通流，只是视觉上发生的偏移。relative的偏移是基于对象的margin的左上侧，它可以在display:inline(行内元素)的时候起作用。
我们先用块状元素来做个示例：
<style type="text/css">
div{ width: 100px; height: 50px; line-height: 50px; text-align: center; color: #fff; }
</style>
<div style="background: blue">A</div>
<div style="background: red; position: relative; top: 20px; left: 20px;">B</div>
<div style="background: green">C</div>
右图中的黑色虚线部分为元素B的默认普通流位置，而黄色线则代表元素B的相对偏移量。我们可以很明显的看出在元素C依然还是保留在原位，并没有因为元素B发生了偏移而随之变化。
我们再来看看行内元素（在这里用大家最常用的span来做示例）
<style type="text/css">
strong { background: #808080; } em { background: #ffd800; } span { background: #b6ff00; position: relative; top: 10px; left: 10px; width: 100px; }
</style>
<strong>strong</strong><em>em</em><span>span</span>
在这里对span进行width属性的赋值（为100px），但是我们可以看到span在运用了relative这个position属性值后，依然对width属性无效，没有变成100px。换而言之，position: relative并没有改变行内元素的Display属性，这个概念非常重要（注意与接下来的absolute的区别）--->relative只是视觉上发生位置变化不会改变display。
Absolute
俗称的绝对定位，绝对定位是相对而言的，怎么理解呢？应用了position: absolute的元素会循着节点树中的父（祖）元素来确定“根”，然后相对这个“根”元素来偏移。如果在其节点树中所有父（祖）元素都没有设置position属性值为relative或者absolute则该元素最终将对body进行位置偏移。当元素的父级设置了position属性，且position的属性值为absolute或者relative时，这个时候，元素将按照这个父级来进行定位。应用了position: absolute的元素会脱离页面中的普通流并改变Display属性！
我们先用一个默认嵌套的DIV来做示例
<body style="background: yellow;">
<div style="background: #fff"> A <div style="background: #81b6ff"> A - 1 <div style="background: #b6ff00;"> A - 2 </div>
</div>
</div>
</body>
现在我们对A-2这个div设置绝对定位(Top: 0, Left: 0)，而没有对它的父元素（A、A-1）设置任何的position值
<body style="background: yellow;">
<div style="background: #fff"> A <div style="background: #81b6ff"> A - 1 <div style="background: #b6ff00; position: absolute; top: 0; left: 0;"> A - 2 </div>
</div>
</div>
</body>
可以看到（A-2）最终是根据body来产生了位移，让我们对比分别设置一下父元素position。
从上面的图，我们可以总结以下几个结论。
1）块状元素在position(relative/static)的情况下width为100%，但是设置了position: absolute之后，会将width变成auto（会受到父元素的宽度影响）。
2）元素设置了position: absolute之后，如果没有设置top、bottom、left、right属性的话，浏览器会默认设置成auto，而auto的值则是该元素的“默认位置”。即设置position: absolute前后的offsetTop和offsetLeft属性值不变。
特殊情况：
- Firefox的话会直接将top、left设置成offsetTop和offsetLeft的值而非auto。
- IE7下会附加到父元素的末尾。
一些Position小知识
1）应用了position: relative/absolute的元素，margin属性仍然有效，以position:relative来举例。如果设置了left、top、bottom、right的属性，建议大家不要设置margin数据，因为很难精确元素的定位，尽量减少干扰因素。
2）position: absolute忽略根元素的padding。
<div id="a" style="background: #fff; width: 200px;"> A <div id="b" style="background: #81b6ff; width: 150px; position: relative; padding-top: 100px;"> A - 1 <div id="c" style="background: #b6ff00; position: absolute; left: 0; top: 0"> A - 2 </div>
</div>
</div>
3）在IE6/7中设置position属性后会导致z-index属性失效
<!-- 解决方案，父元素设置一个更大的z-index值即可 -->
<div style="z-index: 2;"> a <div style="position: relative; z-index: 1;"> b </div>
</div>
4）行内元素在应用了position：absolute之后会改变display。
<span style="position: absolute; width: 100px; height: 100px; top: 10px; left: 10px; background: #fff;"> 我的display属性由inline变成了block </span>
因此，要注意到relative是并没有改变行内元素的呈现模式，而absolute是会改变行内元素的呈现模式，如果设置了absolute并不需要显式的的将元素display改成block。
5）应用了position: absolute / relative之后，会覆盖其他非定位元素（即position为static的元素），如果你不想覆盖到其他元素，也可以将z-index设置成-1。
Fixed
在很长的时间里，这个属性值因为兼容性问题，并没有得到非常广泛的应用（IE6未实现该属性值）。fixed和absolute有很多共同点：
- 会改变行内元素的呈现模式，使display之变更为block。
- 会让元素脱离普通流，不占据空间。
- 默认会覆盖到非定位元素上。
fixed与absolute最大的区别在于：absolute的”根元素“是可以被设置的，而fixed则其”根元素“固定为浏览器窗口。即当你滚动网页，其元素与浏览器窗口之间的距离是恒定不变的。
网友评论