首页 › 网站首页 ›商业信息› 定位 › 查看内容

零基础教你学前端——84、定位的堆叠顺序

运营营销 2023-3-9 14:08 9001人围观定位

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;
}