CSS：position属性比较（*****五颗星）

1.position属性：

position属性：用于指定一个元素在文档中的定位方式。 top， right， bottom 和 left 属性则决定了该元素的最终位置把元素放置在一个静态的，相对的，绝对的，固定的位置中。

position的默认值是static（也就是说对于任意一个元素，如果没有定义它的position属性，那么它的position:static）

1.fixed：固定定位

可定为与相对浏览器窗口的指定坐标，可以通过left，top等属性来定位。

元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。Fixed 定位使元素的位置与文档流无关，因此不占据空间。 Fixed 定位的元素和其他元素重叠。

未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范

位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过"left""top""right"以及"bottom"属性来规定。不论窗口滚动与否，元素都会留在那个位置。工作于 IE7( strict 模式)。

元素的定位是相对于 window （或者 iframe）边界的，和其他元素没有关系。但是它具有破坏性，会导致其他元素位置的变化。

2.relative：相对定位

对象不可层叠，但将依据 left,right,top,bottom 等属性在正常文档流中偏移位置

可将其移至相对于其正常位置的地方，因此 left：20 会将元素移至元素正常位置左边 20 个像素的位置

如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素"相对于"它的起点进行移动。在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框

元素的定位永远是相对于元素自身位置的，和其他元素没关系，也不会影响其他元素。

3.absolute：绝对定位

此元素可定位于相对包含他的元素的指定坐标，此元素可通过 left，top 等属性规定

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。absolute 定位使元素的位置与文档流无关，因此不占据空间。absolute 定位的元素和其他元素重叠。

将对象从文档流中拖出,使用left,right,top,bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象,则依据body对象。而其层叠通过z-index属性定义

元素的定位相对于前两者要复杂许多。如果为 absolute 设置了 top、left，浏览器会根据什么去确定它的纵向和横向的偏移量呢？答案是浏览器会递归查找该元素的所有父元素，如果找到一个设置了position:relative/absolute/fixed的元素，就以该元素为基准定位，如果没找到，就以浏览器边界定位。如下两个图所示：