搞懂Z-index的所有细节

Myth丶恋晨 2021-07-04 16:16 257阅读 0赞

![在这里插入图片描述][20200519152926222.png]  
用`z-index`来改变堆叠顺序

z-index测试网站

## 一 `z-index` 在什么情况下才生效？ ##

`z-index`的运用是需要条件的,与其相关的属性就是`position`属性。我们以三个div来举例子。

*  `position: static;`

当三个div的`position`都为`static`时,我们把`div`(A)的`z-index`设置为15, 把div(B)的`z-index`设置为10,把div©的`z-index`设置为5。  
![在这里插入图片描述][20200519153147363.png]  
发现div(B)依然把div(A)的一部分挡住了,所以当`position`为`static`时,`z-index`起不到任何改变堆叠的作用。

*  `position: relative/absolute/fixed;`

当三个`div`的`position`都为`relative/absolute/fixed`时,发现`z-index`生效。  
![在这里插入图片描述][20200519153312153.png]  
**总结: 只有`position`的值为`relative/absolute/fixed`中的一个,`z-index`才会生效。**

## 二 `z-index`值越大元素越靠前，对吗？ ##

我们现在div(A)和div(B)中再分别创建一个小的div©和div(d),  
![在这里插入图片描述][20200519153343556.png]  
这一张图就是一个特例

我们观察到,`div`(a)的`z-index`为20 可是为什么还会被`z-index`仅仅为10的div(B)遮挡住呢?  
难道是因为`z-index`继承给他的子元素了吗?不`z-index`可是不继承给它的子元素的。  
我们试试把div(A)的`z-index`设置成`auto`,  
![在这里插入图片描述][2020051915362989.png]  
div(a)成功的遮挡住了`z-index`比他小的元素。  
再试试只把div(a)设置为auto  
![Paste\_Image.png][Paste_Image.png]

总结:

1.  当`z-index`的值设置为`auto`时,不建立新的堆叠上下文,当前堆叠上下文中生成的`div`的堆叠级别与其父项的框相同。
2.  当`z-index`的值设置为一个整数时,该整数是当前堆叠上下文中生成的`div`的堆栈级别。该框还建立了其堆栈级别的本地堆叠上下文。这意味着后代的`z-index`不与此元素之外的元素的`z-index`进行比较。

ps: 通俗讲就是,当一个`div`的`z-index`为整数时,它的子元素和外界元素进行比较时,采用父元素的`z-index`进行比较, 和兄弟元素比较采用自身的`z-index`。当一个`div`的`z-index`为`auto`时,如果它和它的兄弟进行比较,采用它父元素的`z-index`。

## 三 `z-index` 不设置和设置为`0`有什么区别? ##

如果不设置`z-index`那么默认值为`auto`,则不建立层叠上下文。设置为`0`则会脱离文档流,建立层叠上下文。  
![在这里插入图片描述][20200519154455980.png]  
文档流Z轴

[20200519152926222.png]: /images/20210704/f202a03665374e4fbd26ea59b67f45a4.png
[20200519153147363.png]: /images/20210704/2e6f451c666047e0a1913e4695d7380f.png
[20200519153312153.png]: /images/20210704/5c6afe18d8264268ada931490d22c9de.png
[20200519153343556.png]: /images/20210704/3dfa5e4a72ae4b5ab06e9bda7a1b0177.png
[2020051915362989.png]: /images/20210704/d3d15a8b7bf8494a87bf70311eb07c5c.png
[Paste_Image.png]: /images/20210704/a8ebe7ee07974dc7a24fbbc8d1a57f11.png
[20200519154455980.png]: /images/20210704/f32c172fe9634e12b35e42358bf9ca2e.png