css定位和显示层级

CSS定位
定位元素 position
属性：relative 相对定位
absolute 绝对定位
fixed 固定定位
如果定位属性需要发生偏移需要搭配偏移量进行设置 水平方行设置：left 从页面左边向右移动 right 从页面右边向左移
垂直方向设置 ：top bottom
1、相对定位
属性值relative 移动时参考元素：自身盒子的原始位置。
基本语法：.calss{
position:relative;
top:100px;
left:100px;
}
注意点：相对定位是以自己原始位置为原点坐标，可以设置负值，相对定位并没有脱离标准流当进行位置偏移时原来自身的位置依然存在不会被后面元素挤占。
2、绝对定位
属性值 ：absolute 偏移时参考元素：很多种，按照距离最近的有定位的祖先元素，如果所有祖先元素都没有定元素则以body元素为参考位置。
基本语法：.class祖先｛
position：relative；
｝
.class｛
position：absolute；
top：100px；
left ：100px；
｝
注意点：绝对定位参考元素很多需要自己定义参考点，无参考点时将以body为参考点进行位置偏移。相对定位脱离相对文本流进行位置偏移时原本位置会被后面元素挤占。适用于一些压盖场景，例如登录页面放在主页弹出来，放在主页面上一层出现的场景。
3、固定定位
属性值：fixed 参考点：浏览器窗口
基本语法：.calss{
position:fixed;
top:100px;
left:100px;
}
注意点：固定定位是脱离标准流的，适用于一些边上广告或者底部的返回顶部。
额外点：默认的压盖顺序（显示等级）
css的书写顺序并不会对定位的优先级有影响，真正影响的事HTML的书写顺序相关，html种哪一个添加定位的元素写在前面谁会优先显示。
自定义的压盖顺序：z-index元素
属性：数字 1、2、3…
基本语法：.calss{z-index:1px;//数值越大显示等级越高}
注意点：只要设置z-index属性属性值不为0显示等级都比没设置的等级高。此元素对没设置定位的元素不起做作用，如果是父子关系则不涉及显示等级。