多个div叠加效果

最新推荐文章于 2022-01-17 16:31:21 发布

wgod

最新推荐文章于 2022-01-17 16:31:21 发布

阅读量1.9k

点赞数 1

本文链接：https://blog.csdn.net/weixin_44324124/article/details/99549791

版权

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>div重叠 叠加实例 排层叠顺序</title>
		<style>
			.div-relative {
				position: relative;
				color: #000;
				border: 1px solid #000;
				width: 500px;
				height: 400px
			}
			
			.div-a {
				position: absolute;
				left: 30px;
				top: 30px;
				z-index: 100;
				background: #F00;
				width: 200px;
				height: 100px
			}
			/* div背景色为红色 */
			
			.div-b {
				position: absolute;
				left: 50px;
				top: 60px;
				z-index: 80;
				background: #FF0;
				width: 400px;
				height: 200px
			}
			/* 背景为黄色 */
			
			.div-c {
				position: absolute;
				left: 80px;
				top: 80px;
				z-index: 70;
				background: #00F;
				width: 300px;
				height: 300px
			}
			/* 背景为蓝色 */
		</style>
	</head>

	<body>
		<div class="div-relative">
			<div class="div-a">我背景为红色</div>
			<div class="div-b">我背景为黄色</div>
			<div class="div-c">我背景为蓝色</div>
		</div>
	</body>

</html>