CSS3笔记之定位篇（二）z-index

//祖先元素的z-index不能为auto

//祖先元素的z-index不能为auto

知识点3：层叠上下文（stacking-context）和层叠水平（stacking-level）（重要）

• 层叠上下文：

页面根元素天生具有层叠上下文，称之为“根层叠上下文”

z-index值为数值的定位元素也具有层叠上下文

其他属性

• 层叠水平：层叠上下文中的每一个元素都有一个层叠水平，决定了同一个层叠上下文中元素在z轴上的显示顺序

• 层叠水平和z-index不是一个东西，普通元素也有层叠水平。

• 层叠上下文的特性：

1. 层叠上下文可以嵌套，组合成一个分层次的层叠上下文。

2. 每个层叠上下文和兄弟元素独立：当进行层叠变化或渲染的时候，只需要考虑后代元素。

3. 每个层叠上下文是自成体系的：当元素的内容被层叠后，整个元素被认为是在父层的层叠顺序中。

知识点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-index层叠顺序的比较止步于父级层叠上下文

知识点6：其他css属性与层叠上下文

• 能创建层叠上下文的的css属性

知识点7：z-index与其他css属性层叠上下文

background --> 负z-index --> block块状水平盒子 --> float浮动盒子 --> inline/inline-block

–> z-index:auto或z-index:0，不依赖z-index的层叠上下文 --> 正z-index

不支持z-index的层叠上下文元素的层叠顺序均是z-index:auto级别；

依赖z-index值创建层叠上下文的情况：

1. position值为relative/absolute或fixed（部分浏览器）

2. display：flex/inline-flex容器的子flex项

知识点8：z-index相关实践分享

• 最小化影响原则

目的：避免z-index嵌套层叠关系混乱

原因：

1. 元素的层叠关系主要由所在的层叠上下文决定

2. IE7 中z-index为auto也会创建层叠上下文

做法：

1. 避免使用定位属性

2. 定位属性从大容器平级分离为私有小容器

• 不犯二准则

目的：避免z-index混乱，出现一山又比一山高的样式问题

原因：多个协作以及后期维护

做法：对于任何非浮层元素，避免设置z-index值，z-index值没有任何道理需要超过2

• 组件层级计数器

目的：避免浮层组件因z-index被覆盖的问题