z-index

最新推荐文章于 2024-10-06 23:37:55 发布

是落落呢

最新推荐文章于 2024-10-06 23:37:55 发布

阅读量64

点赞数

分类专栏： CSS 文章标签： css css3

本文链接：https://blog.csdn.net/m0_46104664/article/details/113770939

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

z-index 最值得注意的两点

元素必须是同级的。目标元素不能和父级元素，子元素等非同级元素进行设置，否则会无效。
position属性必须是absolute

有效

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>z-index</title>
		<style>
			body{
				width: 100vw;
				height: 100vh;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.main {
				position: relative;
				width: 400px;
				height: 400px;
				background: tomato;
			}
			.main>div{
				width: 200px;
				height: 200px;
				position: absolute;
				top: 0;
				left:0;
				bottom: 0;
				right: 0;
				margin: auto;
			}
			.one{
				background:red;
				z-index: 1;
			}
			.two{
				background:blue;
				z-index: 2;
			}
			.three{
				background: green;
				z-index:3;
			}
		</style>
	</head>
	
	<body>
		<div class="main">
			<div class="one"></div>
			<div class="two"></div>
			<div class="three"></div>
		</div>
	</body>

</html>