css定位的堆叠顺序
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本书。地下室的桌子上放的书无论多少，也不可能超过一层桌子上书的高度。
相关推荐HOT
更多>>
如何为Apple iOS设计动态岛？
Dynamic Island 是自 2022 年 9 月 iPhone 14 系列推出以来在 iPhone 屏幕最上方推出的新型药丸状切口。它围绕着 FaceID 传感器和前置摄像头，...详情>>
2023-02-21 17:55:40
成为UI设计师需要具备哪些技能?
如果您对将 UI 设计作为一种潜在的职业道路感兴趣，您可能想知道：对于 UI 设计师而言，最重要的技能是什么?●了解基本设计原则，例如排版和色...详情>>
2023-02-21 17:51:57
用户体验设计师做什么的?
当用户体验设计师完成用户研究分析并发现潜在问题或障碍后，他们将进入设计阶段。用户体验设计师创建流程图以鸟瞰产品的不同元素如何相互连接。...详情>>
2023-02-21 17:50:40
设计的6大要素是什么?
伟大的设计不是偶然发生的。一位伟大的设计师会战略性地选择颜色、形状和版式等东西——所有这些都会影响观众或用户如何看待和参与一件作品。 详情>>
2023-02-21 17:46:00
京公网安备 11010802030320号