【CSS】重新认识z-index

z-index

取值

数字无单位

• auto(默认)和其父元素一样的层叠等级

• 整数

• inherit继承

层叠上下文和层叠等级

对每一个网页来说，默认创建一个层叠上下文(可类比一张桌子)，这个桌子就是html元素，html元素的所有子元素都位于这个默认层叠上下文中的某个层叠等级(类似于桌子上放了一个盆儿，盆上放了一个果盘，果盘上放了一个水杯……)

将元素的z-index属性设置为非auto时，会创建一个新的层叠上下文，它及其包含的层叠等级独立于其他层叠上下文和层叠等级(类似于搬了一张新桌子过来，和旧桌子完全独立)

层叠顺序

div默认在html之上，及div的层级高于html

一个层叠上下文可能出现7个层叠等级，从低到高排列为

1. 背景和边框
2. z-index为负数
3. block盒模型(位于正常文档流，块级，非定位)
4. float盒模型(浮动，非定位)
5. inline盒模型(位于正常文档流，内联，非定位)
6. z-index=0
7. z-index为正数(数值越大越靠上方)

压盖顺序

自定义压盖顺序：使用属性z-index

• 只有定位元素(position属性明确设置为absolute、fixed或relative)可使用z-index

• 如果z-index值相同，html结果在后面的压盖住在前面的

• 父子都有z-index，父亲z-index数值小时，儿子数值再大没用