- 层叠上下文:
页面根元素天生具有层叠上下文,称之为“根层叠上下文”
z-index值为数值的定位元素也具有层叠上下文
其他属性
-
层叠水平:层叠上下文中的每一个元素都有一个层叠水平,决定了同一个层叠上下文中元素在z轴上的显示顺序
-
层叠水平和z-index不是一个东西,普通元素也有层叠水平。
-
层叠上下文的特性:
-
层叠上下文可以嵌套,组合成一个分层次的层叠上下文。
-
每个层叠上下文和兄弟元素独立:当进行层叠变化或渲染的时候,只需要考虑后代元素。
-
每个层叠上下文是自成体系的:当元素的内容被层叠后,整个元素被认为是在父层的层叠顺序中。
知识点4:层叠顺序 (stacking-order)
background --> 负z-index --> block块状水平盒子 --> float浮动盒子 --> inline/inline-block
–> z-index:auto或z-index:0 --> 正z-index
知识点5:z-index与层叠上下文
-
定位元素默认z-index:auto可以看成z-index:0
-
z-index不为auto的定位元素会创建层叠上下文
-
z-inde