共计 2663 个字符，预计需要花费 7 分钟才能阅读完成。
CSS 为盒模型的布局提供了三种不同的定位计划：失常文档流、浮动和定位。咱们曾经晓得，最初一种计划中的相对定位会把元素从失常文档流中齐全移走，它最终的落脚点将取决于咱们开发者。
通过设置 top，left，bottom 和 right 的值，咱们能够在二维空间中对元素进行定位，但 CSS 同时也容许咱们应用 z-index 属性把它搁置在三维空间中。
对于三维空间坐标系，你必定很相熟了。x 轴代表程度方向，y 轴代表垂直方向，z 轴则代表咱们的眼光向页面或屏幕看进去的时候，各元素的布局状况。
因为屏幕是一块二维立体，咱们实际上并没有真的看到 z 轴，更多的是通过透视的模式。当多个元素共享同一块二维立体时，有的元素在顶部，有的元素在底部，咱们由此感触到了 z 轴的存在。
为了决定某个元素在 z 轴方向上的地位，CSS 容许咱们为 z-index 属性设置一个整数值。它能够是正整数、负整数或者 0，值越大，元素就离咱们“越近”，值越小，元素天然也就离咱们“越远”。
如果两个元素在定位之后共享同一块二维空间，那么在这块空间中，z-index 值 越大的元素将可能笼罩 z-index 值较小的元素。
咱们做个试验，来感受一下 z-index 的成果。
创立文件夹 028-css-z-index，在文件夹下创立 z-index.html 和 z-index-style.css 文件。在 html 里构建根底代码，引入内部款式。
在 body 里增加一个 div 容器，定义 class=”one” 属性，在容器里写入文本，同时再增加两个子容器，别离定义属性 class=”two”，class=”three”，填入一些文本。
在款式文件里，定义通用选择器，申明款式：box-sizing: border-box。定义群组选择器 html, body，申明款式：height: 100%。定义 body 选择器，申明款式 margin: 0。
定义选择器 div，申明款式：width: 200px，height: 200px，padding: 20px，给所有的容器定义固定的大小和内填充。
定义分组选择器 .one, .two, .three, .four，申明款式 position: absolute，给所有容器设置相对定位属性。
定义选择器 .one，申明款式：background: #f00，outline: 5px solid #000，top: 100px，left: 200px，给盒子 1 定义背景色，轮廓线色彩和定位地位。
定义选择器 .two，申明款式：background: #0f0，outline: 5px solid #000，top: 50px，left: 75px，给盒子 2 定义背景色，轮廓线色彩和定位地位。
定义选择器 .three，申明款式：background: #0ff，outline: 5px solid #000，top: 125px，left: 25px，给盒子 3 定义背景色，轮廓线色彩和定位地位。
预览一下成果，默认状况下，子容器笼罩了父容器，兄弟容器依据 html 书写程序对应，前面的笼罩后面的。
CSS
* {box-sizing: border-box;}
html, body {height: 100%;}
body {margin: 0;}
div {
width: 200px;
height: 200px;
padding: 20px;
}
.one, .two, .three, .four {position: absolute;}
.one {
background: #f00;
outline: 5px solid #000;
top: 100px;
left: 200px;
}
.two {
background: #0f0;
outline: 5px solid #000;
top: 50px;
left: 75px;
}
.three {
background: #0ff;
outline: 5px solid #000;
top: 125px;
left: 25px;
}回到 css，给 one 增加款式 z-index: 10。给 two 增加款式 z-index: 100。给 three 增加款式 z-index: 150。很显著，咱们曾经为每个容器都设置了 z-index 这个重叠程序属性，值越大，优先级越高。
再看一下，和预期的成果统一：容器 1 的 z-index 值最小，位于最底层，容器 3 的 z-index 值最大，位于最顶层。
此时，咱们再去调整 html 的程序。
三个容器的重叠程序不会发生变化。咱们再持续做试验。
CSS
.one {z-index: 10;}
.two {z-index: 100;}
.three {z-index: 150;}
CSS
<div class="one">
盒子 1
<div class="three"> 盒子 3 </div>
<div class="two"> 盒子 2 </div>
</div>回到 html，在 body 里再增加一个容器 div，定义属性 class=”four”，填入一些文本。很显著，这个容器和盒子 1 在 body 里是并列的兄弟关系。
回到 css，定义选择器 .four，申明款式：background: #00f，outline: 5px solid #ff0，top: 200px，left: 350px，给盒子 4 定义背景色，轮廓线色彩和定位地位。
先来看一下成果，盒子 4 默认状况下在盒子 1 的上面。
为了看的分明，咱们先将盒子 2 和盒子 3 去掉。
咱们看，没错，盒子 4 是在盒子 1 的上面。
HTML
<body>
<div class="one">
盒子 1
<div class="three"> 盒子 3 </div>
<div class="two"> 盒子 2 </div>
</div>
<div class="four"> 盒子 4 </div>
</body>
CSS
.four {
background: #00f;
outline: 5px solid #ff0;
top: 200px;
left: 350px;
z-index: 50;
}此时，在 html 里，咱们把盒子 4 放到盒子 1 的上边。
成果没有什么变动。这是因为盒子 1 定义了 z-index 为 10，大于盒子 4 的默认重叠程序。
让盒子 2 和盒子 3 复原显示。
给盒子 4 增加款式 z-index: 50。
当初，你能够猜一下，盒子 4 在 盒子 1 的上方呢，还是 盒子 3 的上方呢？
咱们看，盒子 4 在 盒子 3 的上方！
很显然，容器的重叠程序的计算，是先比拟同级容器的。子容器是不会超出父容器的重叠程序的。
举个例子，两张桌子，一张在一层，桌子上放了 3 本书。一张在地下室，桌子上放了 30 本书。地下室的桌子上放的书无论多少，也不可能超过一层桌子上书的高度。
本文配套教程链接：https://www.bilibili.com/vide…
