CSS3(定位)

定位（position）

属性：

absolute（绝对定位）

绝对定位脱离从文档流，并且对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

绝对定位脱离了文档流和文本流，因此不占据空间。普通流中的其他元素的布局就像绝对定位的元素不存在一样。

.box {
    position: absolute;
    left: 30px;
    top:20px;
}

如下图：

绝对定位的元素的位置相对最近的以定位的“祖先元素”，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。

Tip：因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。

relative（相对定位）

如果对一个元素进行相对定位，它将出现在它所在的位置上。然后可以通过设置垂直或者水平位置，让这个元素“相对于”它的起点进行移动。

.box {
    position: relative;
    left: 30px;
    top: 20px;
}

如下图：

Tip： 在使用相对定位是，无论是否进行移动，元素仍然占据原来的空间。因此移动元素会导致覆盖其他的框。相对定位没有脱离文档流和文本流。

fixed（固定定位）

如果对元素进行固定定位，则元素固定在屏幕的相应的位置，不会随滚动条的改变而改变。