关于z-index的问题

<!DOCTYPE html>
<html>
<head>
	<title>demo</title>
	<meta charset="utf-8">
	<style type="text/css">
		.main{
			width: 500px;
			height: 500px;
			position: relative;
			left: 200px;
			top: 200px;
			background-color: #CCCCCC;
		}

		.body1{
			width: 200px;
			height: 200px;
			background-color: white;
			position: absolute;
			left: 50%;
			top:50%;
			transform: translate(-50%,-50%);
		}

		.body2{
			width: 200px;
			height: 200px;
			background-color: yellow;
			position: absolute;
			left: 50%;
			top:50%;
			transform: translate(-50%,-50%);
			z-index: 10;
		}

		.circle{
			width:100px;
			height: 100px;
			border-radius: 50% 50%;
			background-color: blue;
			position: absolute;
			left: 60px;
			z-index: 20;
		}		
	</style>
</head>
<body>
	<div class='main'>
		<div class='body1'>
			<div class='circle'></div>
		</div>
		<div class='body2'></div>

	</div>
</body>
</html>

问题描述：

为什么body2设置了z-index为10，body1的子div--circle设置了z-index为20，最后还是被body1盖住了？

饿少 2021-02-10

源自：CSS定位 7-5 项目作业

收起

1回答

好帮手慕雪 2021-02-10 18:01:17

同学，你好！body1里并没有设置z-index: 20;

为其添加上z-index: 20;就是你想要的效果了。祝：学习愉快

收起回答

提问者饿少 #1

但是我想body1隐藏

2021-02-10 18:06:31
好帮手慕雪回复提问者饿少 #2

不想要body1那就直接删除就可以了。是想要这种效果吗？
如果不是，请同学详细描述一下你的需求

2021-02-18 19:41:42
提问者饿少回复好帮手慕雪 #3

我不想删除body1，因为我需要它，在这种情况下：

存在body1和body2 两个有重叠部分，body1上有一个circle，circle被 body2与body1的重合部分给盖住了，我想让circle在body1和body2的上面显示出来，而不是被盖住，前提是circle属于body1，并且body2在body1的上面

2021-02-21 09:34:58