Question

我拼命尝试寻找解决z-index问题的方法。因此，这里有一个包含2个其他div的div，它们分别具有不同的背景图像。我想叠加div以使背景图像也叠加。但是我不能。你能帮我吗？

HTML

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

SCSS

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格必须具有以下位置：绝对位置。您必须为顶部和左侧提供值，以将它们放置在所需的位置。我将添加一个工作的小提琴。 Here是一个工作的小提琴。

<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>

尝试在div中使用z-index

2 个答案: