尝试将 z-index 与 div 一起使用

Question

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

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

'screen'里面的2个div必须有position:absolute。您必须为 top 和 left 提供值以将它们放置在您想要的位置。我将添加一个工作 fiddle。 Here 是有效的 fiddle.

<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 在另一个之上，您需要更改一个的位置，例如 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>

尝试将 z-index 与 div 一起使用

Trying to use z-index with divs

html

css

position

sass

z-index