z-index
取值
数字无单位
-
auto(默认)和其父元素一样的层叠等级
-
整数
-
inherit继承
层叠上下文和层叠等级
对每一个网页来说，默认创建一个层叠上下文(可类比一张桌子)，这个桌子就是html元素，html元素的所有子元素都位于这个默认层叠上下文中的某个层叠等级(类似于桌子上放了一个盆儿，盆上放了一个果盘，果盘上放了一个水杯……)
将元素的z-index属性设置为非auto时，会创建一个新的层叠上下文，它及其包含的层叠等级独立于其他层叠上下文和层叠等级(类似于搬了一张新桌子过来，和旧桌子完全独立)
层叠顺序
div默认在html之上，及div的层级高于html
一个层叠上下文可能出现7个层叠等级，从低到高排列为
- 背景和边框
- z-index为负数
- block盒模型(位于正常文档流，块级，非定位)
- float盒模型(浮动，非定位)
- inline盒模型(位于正常文档流，内联，非定位)
- z-index=0
- z-index为正数(数值越大越靠上方)
压盖顺序
自定义压盖顺序：使用属性z-index
-
只有定位元素(position属性明确设置为absolute、fixed或relative)可使用z-index
-
如果z-index值相同，html结果在后面的压盖住在前面的
-
父子都有z-index，父亲z-index数值小时，儿子数值再大没用
转载：https://blog.csdn.net/qq_45812488/article/details/125339130
查看评论