z-index叠放次序010

最新推荐文章于 2024-02-10 11:29:13 发布

陀陀吖

最新推荐文章于 2024-02-10 11:29:13 发布

阅读量117

点赞数

分类专栏： html与css

本文链接：https://blog.csdn.net/weixin_40422393/article/details/88909510

版权

html与css 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>z-index</title>
	<style>
		div{
			width: 200px;
			height: 200px;
			background-color: pink;
			position: absolute;     /*0、给绝对定位，三个各自会叠在一起*/
			z-index: 0;      /*默认的不用写出来  只有定位的盒子才有*/
		}
		.red{
			background-color: red;
			z-index: 1;     /*2、让红盒子在最上面*/
		}
		.yellow{
			background-color: yellow;
			left:50px;
			top: 50px;
			z-index: 2;     /*3、现在黄盒子又在最上面，因为2比1大*/
		}
		.blue{
			background-color: blue;   /*1、一开始跑在最上面*/      /* z-index: 没有单位*/
			left:100px;
			top: 100px;
		}
	</style>
</head>
<body>
	<div class="red"></div>
	<div class="yellow"></div>
	<div class="blue"></div>
</body>
</html>