CSS定位

1.相对定位（relative）

 

注：1.占原来的位置；

       2.参照自己原来的位置改变位置；

       3.保持标签原有的显示模式。

2.绝对位置

先找已经定位的父级，如果有，则以父级为参照物进行定位；

有父级，但没定位，则以浏览器窗口为参照物进行定位。

 

注：1. 改变标签原有的显示模式：行内块特点（在一行共存，宽高生效）；

       2.脱标，不占位。

3.子绝父相（父级为广义父级，即：父亲，爷爷...）

 

注：绝对定位查找父级方式：就近原则；若找不到这样的父级，就以浏览器窗口为参照进行定位

4.定位居中

手动版：

自动版[   transform:translate( , )   ]：

优点：1.便利；

           2.可绝对居中（当宽高为奇数时）

 注：绝对定位的盒子不能用margin:0  auto居中

5.显示层级

 

注：1.z-index默认为0；

       2.默认情况下，定位的盒子，后来者居上；

       3.z-index:整数；取值越大，显示顺序越靠上；

       4.z-index必须配合定位才生效。

6.固定

注：1.脱标，不占位置；

        2.参考浏览器窗口改变位置；

        3.具备行内块特点。