乐趣区

关于前端:零基础教你学前端84定位的堆叠顺序

jiezi

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…

退出移动版