CSS z-index父子盒压盖顺序

最新推荐文章于 2023-06-01 17:23:12 发布

Ye_xiaoMing

最新推荐文章于 2023-06-01 17:23:12 发布

阅读量612

点赞数

本文链接：https://blog.csdn.net/Leaf_xiaoMing/article/details/119547227

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		* {
			padding: 0;
			margin: 0;
		}
		/* z-index 设置默认压盖顺序

		  使用要求：
                  有定位的元素才可以使用z-index；属性值是数字，数字越大压盖顺序越靠上；
		  但是，当父子盒都有z-index，父盒子z-index小，子盒子z-index即使再大也没用。
		*/
		
		/*父盒子主要为了设置z-index属性，此处不设置相应样式来展示*/
		div {
			width: 300px;
			height: 300px;
			position: relative;
		}
                /*设置父盒子z-index属性*/
		div.box1 {
			z-index: 4;
		}
		div.box2 {
			z-index: 3;
		}
                /*设置子盒子相应属性*/
		div span {
			position: absolute;
		}
		.box1 .son {
			width: 300px;
			height: 200px;
			background-color: lightblue;
                        /*设置box1盒子的子盒子的z-index较小*/
			z-index: 11;
		}
		.box2 .son {
			width: 300px;
			height: 200px;
			background-color: pink;
			top: -200px;
			left: 200px;
                        /*设置box2盒子的子盒子的z-index较大*/
			z-index: 22;
		}
	</style>
</head>
<body>
	<div class="box1">
		<span class="son"></span>
	</div>
	<div class="box2">
		<span class="son"></span>
	</div>
</body>
</html>

运行效果：

Ye_xiaoMing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS z-index父子盒压盖顺序

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <meta http-equiv="Content-Type" content="text/.
复制链接

扫一扫