css中z-index可以被继承吗？

最新推荐文章于 2022-08-26 11:46:58 发布

Hy-Bcat

最新推荐文章于 2022-08-26 11:46:58 发布

阅读量1.7k

点赞数

分类专栏：前端入门

本文链接：https://blog.csdn.net/qq_37745307/article/details/100554182

版权

前端入门专栏收录该内容

7 篇文章 1 订阅

订阅专栏

问题：关于z-index可以被继承吗？

答：可以的，思路如下

三个盒子设置了定位，只对最大的盒子设置了z-index=3,由于z-index默认值是0，如果子盒子没有继承z-index应该都到被覆盖掉了

代码入下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	.big-box {
		height: 300px;
		width: 800px;
		background-color: pink;
		position: relative;
		z-index: 3;
	}
	.small-box {
		height: 200px;
		width: 200px;
		position: absolute;
		top: 20px;
		background-color: palegreen;
		border: 3px solid black;
	}
	.little {
		width: 100px;
		height: 100px;
		position: absolute;
		background-color: palegoldenrod;
		border: 3px solid skyblue;
	}
	</style>
</head>
<body>
	<div class="big-box">
		<div class="small-box">
			<div class="little">
				
			</div>
		</div>
	</div>
</body>
</html>

没打过的代码都不是自己的