几种常见定位及层级问题

定位设置及属性

定位：更高级的布局手段，所有元素都可以使用定位
通过浮动，外边距都不能实现位置效果的时候，就使用定位

     属性：
     position
      取值：static （默认值没有设置定位）
            relative 相对定位
                偏移时参考位置：元素本身的初始位置
                特点：不会脱离标准文档流 初始位置继续占用

 
       定位元素：position值非默认值static
       定位元素的偏移：left、right、top、bottom

几种常见定位使用

属性：
position
取值：
static 默认值，没有设置定位
relative：相对定位
偏移时参考位置：元素本身的初始位置
特点：
1.不脱离标准文档流
2.初始位置继续占用
3.会覆盖标准文档流里面的文本内容
absolute：绝对定位
偏移时参考位置：离他最近的开启定位的祖先元素，如果没有祖先元素开启定位，参考变为body
特点：
1.margin：0 auto，水平居中和浮动没有效果
2.设置绝对定位的元素脱离标准文档流
3.原来位置不会继续占用，后面标准文档流中的兄弟元素上移
4.会覆盖标准文档流里面的文本内容
一般作为绝对定位的参考是是将祖先元素设置为相对定位
fixed：固定定位，就是特殊的绝对定位
偏移时参考位置：浏览器视口
特点：
1.设置绝对定位的元素脱离标准文档流
3.原来位置不会继续占用，后面标准文档流中的兄弟元素上移

定位元素使用

          定位元素：position值非默认值static
          定位元素的偏移：left 、right、top、bottom 单位px；

粘滞定位

粘滞定位
    sticky
    参考位置，离父元素的距离设置一致，就固定不动
    特点，不脱离标准文档流，原先位置继续占有

层级

设置定位元素的层级关系 z-index
默认定位元素的初始层级为0
同级的定位元素，后面的会覆盖前面的