共计 2726 个字符，预计需要花费 7 分钟才能阅读完成。
前言
问题：# 为什么 z -index 值大的却在 z -index 小的上面？
上面带你一探到底
css 为盒模型的布局提供了三种不同的定位计划
- 失常文档流
- 浮动
- 定位
最初一种计划（特指相对定位）将会把元素从失常文档流中齐全移走，其最终的落脚点将取决于开发者。
通过设置 top，left，bottom 和 right 的值，你能够在二维空间中对元素进行定位，但 CSS 同时也容许你应用 z-index 把它搁置在三维空间中。
外表看起来，z-index 仿佛是一个很简略的属性，你给它设置哪个值，元素就会位于 y 轴的哪个地位，就这样。但它实际上并没有咱们设想的这么简略，这个属性背地是一系列决定元素所在层级的规定。
z-index 的根底概念
x 轴代表程度方向，y 轴代表垂直方向，z 轴则代表咱们的眼光向页面（屏幕）看进去的时候，各元素的布局状况。
屏幕是一个二维立体，所以咱们实际上是看不到 z 轴的，z 轴实际上是通过透视的模式展现的。也就是说，多个元素共享同一块二维平民啊时，友得元素在顶部，有的元素在底部，因而而感触到 z 轴的存在。
css容许咱们给 z -index 设置三种值来决定某个元素在 z 轴方向上的地位。
- auto（默认值）重叠程序与父元素相等
- number 元素的重叠程序，能够为正整数，负整数或者 0
- inherit 规定应该从父元素继承 z -index 属性的值
如果两个元素在定位之后 共享同一块二维空间，那么在这块空间中，z-index 越大的元素将会笼罩 z -index 较小的元素。
层叠上下文和层叠等级
什么是层叠上下文？
MDN 定义：咱们假设用户侧面向（浏览器）视窗或网页，而 HTML 元素沿着其绝对于用户的一条虚构的 z 轴排开，层叠上下文 就是对这些 HTML 元素的一个三维构想。众 HTML 元素基于其元素属性依照优先级程序占据这个空间。
什么是层叠等级？
在层叠上下文中，子级层叠上下文的 z-index 值只在父级中才有意义。子级层叠上下文被主动视为父级层叠上下文的一个独立单元。这样就产生了层叠等级，层叠上下文依据层叠等级决定元素在页面的层叠程序。
在一个层叠上下文中，一共可能呈现七个层叠等级，从最低到最高排列，顺次是：
| 等级 | 层叠元素 |
|---|---|
| 1 | 背景和边框：造成层叠上下文的元素的背景和边框，它是整个上下文中层叠等级最低的 |
| 2 | Z-Index 为正数：设置了 z-index 为正数的子元素以及由它所产生的层叠上下文 |
| 3 | 块级盒模型：位于失常文档流中的、块级的、非定位的子元素 |
| 4 | 浮动盒模型：浮动的、非定位的子元素 |
| 5 | 内联盒模型：位于失常文档流中的、内联的、非定位的子元素 |
| 6 | Z-index 为 0：设置了 z-index 为 0 的、定位的子元素以及由它所产生的层叠上下文 |
| 7 | Z-Index 为负数：设置了 z-index 为负数的、定位的子元素以及由它所产生的层叠上下文，它是整个上下文中层叠等级最高的 |
总结：
- 层叠上下文能够蕴含在其余层叠上下文中，并且一起创立一个层叠上下文的层级。
- 每个层叠上下文都齐全独立于它的兄弟元素：当解决层叠时只思考子元素。
- 每个层叠上下文都是自蕴含的：当一个元素的内容产生层叠后，该元素将被作为整体在父级层叠上下文中按程序进行层叠。
Note: 层叠上下文的层级是 HTML 元素层级的一个子级，因为只有某些元素才会创立层叠上下文。能够这样说，没有创立本人的层叠上下文的元素会被父层叠上下文 异化。
示例
每个被定位的元素都创立了单独的层叠上下文，因为他们被指定了定位属性和 z-index 值。咱们把层叠上下文的层级列在上面：
-
Root
- DIV #1
- DIV #2
-
DIV #3
- DIV #4
- DIV #5
-
DIV #6
留神 DIV #4，DIV #5 和 DIV #6 是 DIV #3 的子元素，所以它们的层叠齐全在 DIV #3 中被解决。一旦 DIV #3 中的层叠和渲染解决实现，DIV #3 元素就被作为一个整体传递与兄弟元素的 DIV 在 root（根）元素进行层叠。
这几个 div 在层叠上下文的层叠等级顺次是：DIV #1 > DIV #4 > DIV #6 > DIV #5 > DIV #3 > DIV #2 > Root。
案例展现
最初咱们再来看一个案例，解释为什么 z -index 值大的元素却在 z -index 小的元素上面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {padding: 20px;}
.one,
.two,
.three,
.four {
position: absolute;
font-size: 50px;
}
.one {
width: 400px;
height: 400px;
background: red;
top: 100px;
left: 200px;
z-index: 10;
}
.two {
background: aqua;
width: 200px;
height: 200px;
top: 50px;
left: 50px;
z-index: 100;
}
.three {
background: blue;
width: 200px;
height: 200px;
top: 100px;
left: 100px;
z-index: 150;
}
.four {
background: green;
width: 200px;
height: 200px;
top: 250px;
left: 350px;
z-index: 50;
}
</style>
</head>
<body>
<div class="one">
1
<div class="two">2</div>
<div class="three">3</div>
</div>
<div class="four">4</div>
</body>
</html>来看看效果图
因为 div.two 和 div.three 在 div.one 中，所以它的 z -index 是和 div.one 的层叠上下文是相干的。理论体现进去的 z -index 是上面这样的：
| 元素 | z-index 值 |
|---|---|
| .one | 10 |
| .two | 10.100 |
| .three | 10.150 |
| .four | 50 |
论断： div.one 和外部蕴含的所有将会在层级上低于 div.four，无论给 div.one 的子元素设置多大的 z-index，子元素的层级都无奈超过 div.four。
最初： 看完了下面的这个案例，置信此时你对一个很大的 z -index 值却不能显示在一个小的 z -index 的值的下面有了了解了吧。
总结：定位元素能够创立新的层叠上下文，在这个上下文中的所有层叠等级，都会高于或者低于另一个层叠上下文的所有层叠等级。
