尝试将 z 索引与 div 一起使用

Question

我拼命地寻找解决 z-index 问题的方法。所以在这里我有一个包含另外 2 个div 的div，它们分别具有不同的背景图像。我想叠加div以使背景图像也叠加。但我不能。你可以帮我吗？

.HTML

<div class="right">
<div class="case"></div>
<div class="screen"></div>
</div>

南海

div.right {
position: relative;
div.screen {
background-image: url("../../public/screen.svg");
background-repeat: no-repeat;
height: 150px;
width: 150px;
position: relative;
z-index: -1;
}
div.case {
background-image: url("../../public/case.svg");
background-repeat: no-repeat;
height: 150px;
width: 150px;
position: relative;
z-index: -2;
}
}

谢谢

Answer 1

"屏幕"内的 2 个div 必须具有位置：绝对。您必须为顶部和左侧提供值才能将它们放置在所需的位置。我将添加一个工作小提琴。 这是一个工作小提琴。

<div class="right">
<div class="case"></div>
<div class="screen"></div>
</div>
.right {
position: relative;
}
.screen {
background-color: blue;
left: 10px;
top:10px;
height: 250px;
width: 250px;
position: absolute;
z-index: -1;
}
div.case {
background-color: red;
left: 20px;
top:20px;
height: 150px;
width: 150px;
position: absolute;
z-index: 3;
opacity:0.3;
}

Answer 2

这是你要找的吗？要将一个div放在另一个div之上，您需要更改一个人的位置，例如top&left或transform：translate

div.right {
position: relative;
}
div.screen {
background-color: red; /* i changed the background since i dont have the img */
background-repeat: no-repeat;
height: 150px;
width: 150px;
position: relative;
z-index: -1;
top: -75px;
left: 75px;
}  
div.case {
background-color: blue;
background-repeat: no-repeat;
height: 150px;
width: 150px;
position: relative;
z-index: -2;
}

<div class="right">
	<div class="case"></div>
	<div class="screen"></div>
</div>