Попытка использовать z-index с divs

Question

Я отчаянно пытаюсь найти решение моей проблемы с z-index. Так что здесь у меня есть div, содержащий 2 других 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

Это то, что вы ищете? Чтобы сделать один делитель поверх другого, вам нужно изменить свою позицию, например, сверху и слева или трансформировать: 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>

Answer 2

2 деления внутри «экрана» должны иметь положение: абсолютное. Вы должны предоставить значения сверху и слева, чтобы разместить их там, где вы хотите. Я добавлю рабочую скрипку. Здесь - рабочая скрипка.

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