CSS属性position详解

1.position:static

对象遵循常规流，top、right、bottom、left属性不会被应用。其最近的祖先元素的内容box边界构成包含块，祖先元素的display属性是以下之一：

• block
• inline-block
• list-item
• run-in
• table
• table-cell

2.position:relative

对象遵循常规流，并且依靠自身在正常流中的位置通过top，right，bottom，left属性进行偏移时不影响常规流中的任何元素。层叠通过z-index属性定义。其最近的祖先元素的内容box边界构成包含块，祖先元素的display属性是以下之一：

• block
• inline-block
• list-item
• run-in
• table
• table-cell

3.position:absolute

对象脱离常规流，使用top，right，bottom，left等属性进行绝对定位，盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠，其层叠通过z-index属性定义。其包含块是最近的定位祖先元素——最近的祖先元素的position属性值是absolute、fixed或relative，那个祖先元素的填充边界构成包含块。设置此属性值会隐性地将元素的display属性改变成display:block。

4.position:fixed

对象脱离常规流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。其包含块是视口或页面box。设置此属性值会隐性地将元素的display属性改变成display:block。