css笔记 - 张鑫旭css课程笔记之 z-index 篇

一、z-index语法、支持的属性值等

z-index：

在支持z-index的元素上，

 z-index规定了元素（包括子元素）的垂直z方向的层级顺序，

 z-index可以决定哪个元素覆盖在哪个元素上边。（这个学过ps的，想象一下图层的概念，z-index就像是调整图层的上下顺序。）

 z-index在css2.1中需要和定位元素(position为relative、absolute、fixed、sticky等这些)配合使用才有作用。

 

属性值

?

1 2 3 4 5 6 7

z-index:auto;      z-index:整数值;(支持负值和animation动画)      z-index:inherit;

　　

 

二、z-index与层级表现的几种情况：

1. 普通元素中不设置z-index的情况下：

如果 都没有设置 z-index层级，那么后边的元素覆盖前边的元素。即后来居上

如果z-index设置了 具体数值，那么数值大的覆盖数值小的。即谁大谁上

比如：a元素的z-index为2；b元素的z-index为1；b虽然在a后边，但是a覆盖b；

 

2. 定位元素的嵌套父元素设置了z-index的情况下：

a). 父元素z-index都设置具体数值时：

如果父元素有大有小，遵循 祖先优先原则，谁的父亲的z-index值大，谁在上边。

如果父元素一般大，那么遵循后来居上，谁的dom位置靠后谁的层级在上边。

比如：a元素的z-index为2；b元素的z-index为1；

因为b在a后边，即使a和b的父元素z-index都为1。b的父元素也比a的父元素高。

同样如果a的父元素为2，b的父元素为1，那么即使b在a后边，a的父元素也比b的父元素高。 

 

b). 父元素z-index都设置auto时：

父元素和没设置一样，没有祖先优先原则，还是遵循类似普通元素的那两条，后来居上和谁大谁上。

 

c).其中一个为auto，另一个为具体数值时：

c-1). ie8及现代浏览器 的表现是，为auto的父元素z-index值不起作用，其 子元素的z-index值和不为auto的另一个父元素比较 层级，谁大谁上。

还是比如a和b，a的z-index值为3，父元素z-index值为auto。

b和其父元素的z-index值都为1，即使b在a后边，即使a的父元素z-index：auto；比b的父元素小，

但是a的z-index值比b的父元素还大，所以a在上边。

 

原因：z-index:auto;生成盒子层叠水平是0，盒子不会创建一个新的层叠上下文（ie8及现代浏览器）。

回归案例，也就是说当a的父元素z-index为auto时，根本没有生成层叠上下文，父元素根本没有出来应战，只能子元素硬着头皮和别人的爹pk。

不过还是自古英雄出少年，只要子元素的z-index值大，管他是谁的父元素都能打赢。

 

c-2).ie6、7 中，因为z-index:auto也会触发层叠上下文，所以也遵循后来居上原则。

 

三、z-index与层叠上下文

定位元素默认z-index：auto可以看成是z-index:0;（从层叠顺序的角度）

z-index不为auto的定位元素会创建层叠上下文。（从层叠上下文的角度，此时auto不等于0）

z-index层叠顺序的比较止步于父级层叠上下文。

 

z-index新建层叠上下文

当z-index为数值的时候，就会新建层叠上下文。

 

三条原则：

　在所有浏览器中，只要z-index为数值，就会创建层叠上下文。

　当z-index为auto时，不会触发新建层叠上下文。z-index：auto;相当于z-index:0;的效果。（ie6、7除外：ie6、7中就算z-index为auto，也会创建层叠上下文。）

　在ie6、7中，只要有z-index就会创建层叠上下文。（这是一个bug）

 

 

四、层叠上下文和层叠水平

1. 层叠上下文（stacking context）

　即，在z轴上被提升(或降低)了层级的元素。

　他是html元素中的一个三维概念，表示元素在z轴上的层级。

 

a). 在html里边，具有层叠上下文的元素有：

　1. 页面的额根元素天生自带层叠上下文。被称为“根层叠上下文”

　2. 设置了z-index：任意数值；的定位元素也具有层叠上下文。

　3. 其他　

• 1. z-index值不为auto的flex项（父元素display:flex|inline-flex，且子元素的z-index值不为auto)

• 2. 元素的opacity值不是1

• 3. 元素的transform值不是none

• 4. 元素mix-blend-mode（混合效果）值不是normal

• 5. 元素的(css3)filter值不是none

• 6. 元素的isolation值不是isolate

• 7. position：fixed声明(chrome等blink/webkit内核浏览器中)

• 8. will-change指定的属性值为上面任意一个
• 9. 元素的-webkit-overflow-scrolling设为touch。

　　

b). 层叠上下文的几个特性：

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

2. 每个层叠上下文和兄弟元素独立，当进行层叠变化或渲染的时候，只需要考虑后代元素。（想象一个人当官，全家升天。子孙得福。但是当官的兄弟不一定得到好处）

3. 每个层叠上下文是自成体系的：当元素的内容被层叠后，整个元素被认为是在父层的层叠顺序中。（就像两个父元素大官比较层级大小，跟子元素的层级大小没有关系。子元素的层级再大，父元素层级小就比不过父元素层级大的。）

 

2. 层叠水平（stacking level）

　层叠上下文中的每个元素都有一个层叠水平，层叠水平决定了同一个层叠上下文中，元素在z轴上的显示循序，遮盖原则。就像事同一个元素中，几个具有层叠次序的子元素之间的排列规则：

 

具体原则是：

　后来居上： 层叠水平一致时，dom结构在后边的覆盖前边的。

　谁大谁上： 层叠水平不一致时，谁的层叠水平值大谁在上边（就是比较z-index的数值谁大）

 

 

3. 普通元素也有层叠水平

7阶层叠水平（stacking level）

　　1.层叠上下文 background/border（根元素或者z-index值不为auto的定位元素） 

　　　　2.负z-index  

　　　　　　3.block块状水平盒子   

　　　　　　　　4.float浮动盒子   

　　　　　　　　　　5.inline/inline-block水平盒子（内联和inline-block平级） 

　　　　　　　　　　　　6.z-index：auto或当成z-index：0   

　　　　　　　　　　　　　　7.正z-index   

 

inline/inline-block元素竟然可以覆盖浮动元素。原因如下

1属于背景装饰类

3、4属于盒子布局类：块状盒子和float经常用于布局

5 则是主要内容类：inline和inline-block用于内容表达

内容是页面中最重要的实体。因此，层叠水平要高。

五、其他需要注意的：

1. 不支持z-index的层叠上下文元素的层叠顺序均是z-index：auto级别（就是上边9条中，不需要z-index也能产生层叠上下文的情况）

2. 依赖z-index的层叠上下文元素的层叠顺序取决于z-index值。

六、两种通过z-index创建层叠上下文的情况：

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

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

2018-09-05  13:48:54