不同布局方式元素的层级关系:
- 标准流 < 浮动 < 定位
- HTML < float < position
不同定位之间的层级关系:
- 相对、绝对、固定默认层级相同
- 此时HTML中写在下面的元素层级会更高,会覆盖上面的元素
更改定位元素的层级:
场景:仅限于改变定位元素的层级,不适用于其他元素。
属性名:z-index
属性值:数字
- 属性值的数字越大,层级越高。
如图,green盒子在red盒子下面写,因为green盒子设置了z-index属性而red盒子没有,所以green盒子显示在red盒子上面。