CSS 的position定位

在css中定位的方式有几种，梳理一些常用：

position有四个值：absolute/relative/fixed/static(绝对/相对/固定/静态(默认))

配合(top,left,bottom,right)来调整元素位置，实现定位。
 

属性position   值：

static	默认值
relative	相对定位
absolute	绝对定位
fixed	固定定位

配合偏移属性进行使用：

top    buttom   left  right

 

语法：   position：relative；

                     top：10px；

绝对定位  absolute: (绝对定位)

声明定位会去找其父级元素都没有设置position：absolute/relative/fixed其会以body为父级。

容器声明 position:relative;    

               关联元素声明：position：absolute； 

             配合位置使用 ：        top:20px;

                                             right:20px;

由于定位，定位元素会覆盖原本元，其中可结合堆叠顺序一起使用。

属性：   z-index 

取值：数字（1.2.3.4）可取负值。

 

固定定位：将元素固定在某个位置，且位置固定在视口某区域，位置不发生变化。

固定定位声明    position:fixed;    

 关联元素声明：position：absolute；

 配合位置使用 ：        top:20px；         

                                  right:20px;