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...