堆叠顺序（z-index）

最新推荐文章于 2022-11-17 15:32:40 发布

山山而川-T

最新推荐文章于 2022-11-17 15:32:40 发布

阅读量631

点赞数

分类专栏： HTML+CSS

本文链接：https://blog.csdn.net/Valentine_T/article/details/107587293

版权

HTML+CSS 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

在使用定位布局时，可能出现盒子重叠的情况，如下图所示：
在这里插入图片描述

通过定位盒子实现的，默认后来者居上，后面的盒子会压住前面的盒子。应用z-index层叠等级属性可以调整盒子的堆砌顺序。

z-index的语法如下：

 1. 属性值： 正整数、负整数、0，数值越大，盒子越靠上；
 2. 如果属性值相同，则按照书写顺序，后来者居上。
 3. 属性值无单位。

注意：z-index只能应用于相对定位、绝对定位、和固定定位的元素，其他标准流、浮动和静态定位无效。
例如，原来的粉色盒子调到最上边来：
在这里插入图片描述
代码如下：

<style>
		.one,
		.two,
		.three {
			position: absolute;
			width: 100px;
			height: 100px;
			background-color: pink;
		}
		.one {
			z-index: 1;
		}
		.two {
			top: 25px;
			left: 25px;
			background-color: purple;
		}
		.three {
			top: 50px;
			left: 50px;
			background-color: orange;
		}
	</style>
</head>
<body>
	<div class="one"></div>
	<div class="two"></div>
	<div class="three"></div>	
</body>