CSS定位（positive）属性的原理

static

默认值，元素出现在正常的流中。默认值，所以没什么好说的。

relative

通过设置水平距离（left/right）或垂直距离（top/bottom），让这个元素相对于它的起点移动。元素仍然占据原来的空间。所以当div2偏移100px时，div1，3都保持在原来的位置。

.div2 {
          width: 100px;
          height: 100px; 
          position: relative;
          top: 20px;
          left: 20px;
}

absolute

绝对定位使元素的位置与文档流无关，因此不占据空间。普通文档流中其他的元素的布局就像绝对定位元素不存在时一样。绝对定位的元素的位置相对于最近的已定位的祖先元素。如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素，这样就出现了一个层次的问题，我们可以通过z-index属性来控制这些框的堆放次序。z-index的值越高，框在堆中的位置就越高。

原始状态：

.div2 {
          width: 100px;
          height: 100px;
          background-color: yellow;
          position: absolute;
          top: 20px;
          left: 20px;
}

设置div2绝对定位：

.div2 {
          width: 100px;
          height: 100px;
          background-color: yellow;
          position: absolute;
          top: 20px;
          left: 20px;
}

看到div3占据了原来div2的位置，因此说明div2设置了绝对定位之后，脱离了普通文档流。并且是相对于浏览器偏移的。

最外层div0设置相对定位：

.div0 {
      position: relative;
}

显然，现在div2相对于div0进行偏移。

那再试试把div0改成absolute？发现结果还是一样。

fixed

固定定位的元素，通常相对于浏览器窗口或frame进行定位。详情请参见窗口小广告。

不管你在哪，广告总在那。