定位设置及属性
定位:更高级的布局手段,所有元素都可以使用定位
通过浮动,外边距都不能实现位置效果的时候,就使用定位
属性:
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
同级的定位元素,后面的会覆盖前面的