目录
前序
z-index设置定位元素层叠顺序
z-index值相同时，写在后面的覆盖写在前面的
z-index值越大，越在上面显示
z-index值为负数
CSS中的层叠上下文
什么是“层叠上下文”
层叠上下文的创建
根层叠上下文
定位元素的传统层叠上下文
层叠顺序
当元素都处在html层堆叠上下文时：
当元素处在定位元素的层叠上下文中
确定两个元素层叠顺序的方法
CSS实战-小米商城导航栏
前序
欢迎阅读之前的CSS教程：
CSS-定位【看这一篇就够了】-CSDN博客
z-index设置定位元素层叠顺序
定位的元素脱离了正常文档流，他相当于漂浮在文档上面。那如果有很多元素都用了定位，如何确定这些元素的漂浮顺序呢？
z-index就是用来指定“定位元素”的堆叠顺序
- z-index的默认值是0
- z-index值可以是正，也可以是负
- z-index值相同的元素，写在后面的会覆盖前面的
- z-index值越大，元素越在上面显示
- z-index只针对定位元素有效，对其他元素无效
z-index值相同时，写在后面的覆盖写在前面的
- .item1与.item2都未设置z-indedx值时，默认都为0，写在后面的会覆盖写在前面的上面
<style>
.box {
width: 200px;
height: 200px;
background-color: skyblue;
position: relative;
}
.item {
width: 100px;
height: 100px;
position: absolute;
}
/*
.item1与.item2都是相对于.box绝对定位
.item1与.item2在都未高设置z-index时，默认值都0，
写在后面会覆盖在前面的上面
*/
.item1 {
background-color: khaki;
left: 40px;
top: 40px;
}
.item2 {
background-color: rgb(255, 192, 203, 0.8);
top: 0;
left: 0;
}
</style>
<body>
<div class="box">
<div class="item item1">1</div>
<div class="item item2">2</div>
</div>
</body>效果：
z-index值越大，越在上面显示
<style>
.box {
width: 200px;
height: 200px;
background-color: skyblue;
position: relative;
}
.item {
width: 100px;
height: 100px;
position: absolute;
}
/*
.item1与.item2都是相对于.box绝对定位
.item1的z-index为3
.item2的z-index为1
3>1，所以.item1会显示在item2的上面
*/
.item1 {
background-color: khaki;
left: 40px;
top: 40px;
z-index: 3;
}
.item2 {
background-color: rgb(255, 192, 203, 0.8);
top: 0;
left: 0;
z-index: 1;
}
</style>
<body>
<div class="box">
<div class="item item1">1</div>
<div class="item item2">2</div>
</div>
</body>效果：
z-index值为负数
z-index值为负数，会显示在当前堆叠上下文中所有元素的最下面，因此这种方式也可以用来隐藏一个元素怒
<style>
.box {
width: 100px;
height: 100px;
background-color: rgba(10, 233, 181, 0.5);
}
.box1 {
width: 200px;
height: 200px;
background-color: skyblue;
/* 相对定位 */
position: relative;
margin-left: 50px;
}
.item {
width: 100px;
height: 100px;
background-color: pink;
/* 绝对定位 */
position: absolute;
z-index: -1;
top: -50px;
left: -30px;
}
</style>
<body>
<!-- 正常的块级元素 -->
<div class="box"></div>
<!-- 相对定位元素 -->
<div class="box1">
<!-- 绝对定位元素 -->
<div class="item"></div>
</div>
</body>效果：
CSS中的层叠上下文
什么是“层叠上下文”
- 每个CSS盒模型都是处在一个三维空间里面，他们分别在平面的X轴、Y轴以及表示层叠的Z轴
- 下面的三个盒子，他们分别处在X轴和Y轴，同时在Z轴上发生层叠
- 并不是所有的盒子都会在Z轴发生层叠，我们都知道默认情况下，HTML元素的页面是沿X轴和Y轴平铺
- 如下图所示，元素默认从上往下、从左往右依次排列
当引入Z轴这个概念后，“z-index的理解就变得简单许多，z-index:值就是决定这个元素在z轴的高度，高度越高就会包含高度较低的元素，从而我们只能看见z-index较高的元素”
层叠上下文的创建
层叠上下文基本上是由一些特定的CSS属性创建的
- html根元素：页面根元素天生具有层叠上下文，称之为“根层叠上下文”
- z-index的值为数值的定位元素的传统层叠上下文（z-index:auto不会创建层叠上下文）
- 其它CSS3属性
根层叠上下文
指的是页面页面根元素，滚动条的默认的始作俑者<html>元素
- 这就是为什么，绝对元素在left/top等值定位的时候，如果没有其他定位元素限制，会相对浏览器窗口进行定位
- 我们写在的body中的html标签，默认就是处在HTML这个根层叠上下文中，在这个层叠上下文中各元素在Z轴上有着自己的排列顺序
定位元素的传统层叠上下文
对于包含有position:relative/position:absolute的定位元素，当其z-index值不是auto的时候，会创建层叠上下文
层叠顺序
除了定位的元素会覆盖在其它元素上面之外，正常对方的盒子也会发生重叠
- “层叠顺序”英文称作“stacking order”，表示元素发生层叠时有着特定的垂直显示顺序
- 我们页面中的元素有：“块级元素”、“行内元素”、“行内块元素”、“浮动元素”、“定位元素”
当元素都处在html层堆叠上下文时：
<style>
body {
margin: 0;
}
.container {
width: 400px;
height: 600px;
background-color: #ddd;
margin: 50px;
}
.box {
width: 300px;
height: 100px;
}
.box1 {
background-color: orchid;
position: absolute;
z-index: -1;
top: 20px;
left: 20px;
}
.box2 {
background-color: aquamarine;
margin-left: 20px;
}
.box3 {
background-color: pink;
float: left;
margin-top: -50px;
margin-left: 20px;
}
.box4 {
background-color: khaki;
display: inline-block;
margin-left: 50px;
margin-top: -50px;
}
.box5 {
background-color: orange;
position: absolute;
left: 110px;
top: 220px;
z-index: 0;
}
.box6 {
background-color: rgb(225, 55, 197);
position: absolute;
left: 90px;
top: 300px;
z-index: 1;
}
</style>
</head>
<body>
<div class="container">
<!-- 定位 z-index:-1 -->
<div class="box box1">定位 z-index:-1</div>
<!-- 块级元素 -->
<div class="box box2">block块元素</div>
<!-- 浮动元素 -->
<div class="box box3">float浮动元素</div>
<!-- 行内块级元素 -->
<div class="box box4">行内块级元素</div>
<!-- 定位元素 z-index:0 -->
<div class="box box5">定位元素 z-index:0</div>
<!-- 定位元素 z-index:1 -->
<div class="box box6">定位元素 z-index:1</div>
</div>
</body>效果：
- 如果元素的等级一样，写在后面的会覆盖在前面的上面
- （指的是HTML标签的先后顺序，不是CSS样式的先后顺序）
当元素处在定位元素的层叠上下文中
- 当相对定位元素处在html层叠上下文中，设置z-index:1时，元素会在所有元素的最下面显示
- 当绝对定位元素处在定位元素的层叠上下文中，设置z-index:-1;是，元素会在当前层叠上下文元素中所有元素的最下面
| .box添加z-index:0 | .box未添加z-index:0 |
|---|---|
 |  |
确定两个元素层叠顺序的方法
- 在比较两个元素层叠顺序时，先比较他们所在的层叠上下文的层叠顺序
- 如果处在同一层叠上下文，则按同一层叠上下文中元素的排列顺序来计算
- 如果不在同一层叠上下文，则他们所在的层叠上下文的顺序决定了他们的顺序
- （即A层叠上下文要高于B层叠上下文，则A中的所有子孙元素都会高于B的子孙元素，哪怕B中元素的z-index再高也没有用）
CSS实战-小米商城导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul {
width: 622.5px;
margin: 0px auto;
padding: 0px;
list-style: none;
}
.menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 50px;
background-color: #fe7b86;
}
.menu .menu-option {
/* width宽度为所有的<li宽度> */
height: 50px;
margin: 0px auto;
}
/* 清除因为li浮动造成的塌陷 */
.clearfix::after{
content: "";
display: block;
clear: both;
}
.menu .menu-option ul li {
position: relative;
float: left;
}
.menu .menu-option ul li a {
display: block;
line-height: 50px;
text-align: center;
text-decoration: none;
height: 50px;
padding:0px 20px;
color: #fff;
}
.menu .menu-option ul li:hover {
background-color: #ee4d75;
}
.menu .menu-option ul li:hover div{
display: block;
}
.menu .menu-option ul li div a:hover {
background-color: #ee4d75;
}
.menu .menu-option ul li div {
display: none;
position: absolute;
background-color: #fe7b86;
width: 200px;
top: 50px;
left: 50%;
margin-left: -100px;
}
.menu .menu-option ul li div a {
display: block;
height: 30px;
line-height: 30px;
padding:5px 20px;
}
</style>
</head>
<body>
<div class="menu">
<div class="menu-option">
<ul class="clearfix">
<li>
<a href="#">小米手机</a>
<div>
<a href="#">xiaomi MIX Fold 4</a>
<a href="#">xiaomi MIX Flip</a>
<a href="#">xiaomi Civi 4 pro</a>
<a href="#">xiaomi 14 ultra</a>
<a href="#">xiaomi 14 Pro</a>
</div>
</li>
<li>
<a href="#">Redmi</a>
<div>
<a href="#">xiaomi MIX Fold 4</a>
<a href="#">xiaomi MIX Flip</a>
<a href="#">xiaomi Civi 4 pro</a>
<a href="#">xiaomi 14 ultra</a>
<a href="#">xiaomi 14 Pro</a>
</div>
</li>
<li>
<a href="#">电视</a>
<div>
<a href="#">S Pro Mini LED</a>
<a href="#">S Pro LED</a>
<a href="#">S系列</a>
<a href="#">Redmi MAX100</a>
<a href="#">Redmi 智能电视 MAX85</a>
</div>
</li>
<li>
<a href="#">平板</a>
<div>
<a href="#">Redmi Pad Pro</a>
<a href="#">Xiaomi Pad 6S Pro</a>
<a href="#">Redmi Pad SE</a>
<a href="#">Xiaomi Pad 6 MAX</a>
<a href="#">Xiaomi Pad 6 Pro</a>
</div>
</li>
<li>
<a href="#">笔记本</a>
<div>
<a href="#">Redmi G Pro</a>
<a href="#">Redmi Book Pro 14</a>
<a href="#">Redmi Book Pro 16</a>
<a href="#">Redmi Book 16</a>
<a href="#">Redmi Book 14</a>
</div>
</li>
<li>
<a href="#">路由器</a>
<div>
<a href="#">AX3000T</a>
<a href="#">BE3600</a>
<a href="#">BE6500 Pro</a>
<a href="#">BE5000</a>
<a href="#">4A</a>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>效果：
