CSS-层叠上下文【看这一篇就够了！！！】

是洋洋a

已于 2024-09-01 20:38:55 修改

阅读量331

点赞数 2

分类专栏：前端 HTML CSS 文章标签： css 前端

于 2024-09-01 17:11:05 首次发布

本文链接：https://blog.csdn.net/zheshiyangyang/article/details/141785846

版权

前端同时被 3 个专栏收录

43 篇文章 0 订阅

订阅专栏

CSS

22 篇文章 1 订阅

订阅专栏

HTML

7 篇文章 0 订阅

订阅专栏

前序

欢迎阅读之前的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>

效果：

是洋洋a

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS-层叠上下文【看这一篇就够了！！！】

item1与.item2都未设置z-indedx值时，默认都为0，写在后面的会覆盖写在前面的上面.box {.item {/*.item1与.item2都是相对于.box绝对定位.item1与.item2在都未高设置z-index时，默认值都0，写在后面会覆盖在前面的上面*/.item1 {left: 40px;top: 40px;left: 0;
复制链接

扫一扫