CSS定位布局

1.静态定位（static）

2.相对定位（relative）：特点：相对自身原有位置进行偏移。

                             仍处于标准的文档流中

                             随即拥有偏移性和z-index属性。

列如：

12

13

3.绝对定位：absolute。特点：建立了以包含块为基准的定位

                             完全脱离了标准的文档流。（对兄弟元素没有影响）                 随即拥有偏移性和z-index属性。                            当一个元素设置绝对定位时，没有设置宽度时，其宽度会随着内容进行调整。

设置偏移参照基准：

      无已定位祖先元素，以为偏移参照基准。

 有已定位祖先元素，以其最近的定位祖先为偏移参照基准。

列如：

 

12

13

14

 

  相对定位比绝对定位稳定得多，所以通常都用相对定位。                               

 

可以设置4个属性值，除了上面3个属性值外还包含固定定位（fixed）属性。

横向两列布局
使用绝对定位实现横向两列布局，应用比较少
使用absolute实现横向两列布局：常用于一列固定宽度，另一列宽度自适应的情况
主要应用技能：
relative--对父元素进行相对定位；
需要注意的是：***固定宽度列的高度要大于自适应宽度的列***因为自适应宽度脱离了标准文档流所以它无法把父元素撑开
absolute--对需要自适应宽度的元素进行绝对定位