z-index叠放顺序

最新推荐文章于 2022-08-31 17:27:54 发布

原创最新推荐文章于 2022-08-31 17:27:54 发布 · 194 阅读

1 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

20 篇文章

订阅专栏

本文通过实例详细解析了CSS中z-index属性的作用，展示了如何通过设置不同的z-index值来控制网页元素的堆叠顺序，使页面布局更加灵活且符合设计需求。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>z-index叠放顺序</title>
	<style>
		.one{
			width: 200px;
			height: 200px;
			background-color: red;
			position: absolute;
			z-index: 2;
		}
		.two{
			width: 200px;
			height: 200px;
			margin: 10px;
			background-color: green;
			position: absolute;
			z-index: 3;
		}
		.three{
			width: 200px;
			height: 200px;
			margin: 20px;
			background-color: blue;
			position: absolute;
			z-index: 1;
		}
	</style>
</head>![在这里插入图片描述](https://img-blog.csdnimg.cn/20191220172317875.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjM3ODQwOQ==,size_16,color_FFFFFF,t_70)
<body>
	<div class="one"></div>
	<div class="two"></div>
	<div class="three"></div>
</body>
</html>