Trying to use z-index with divs

Question

I try desperately to find a solution to my z-index problem. So here I have a div containing 2 other div who respectively have a different background image. I would like to superpose the divs to have the background-image also superimpose. But I can not. Can you help me ?

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

}

Thanks

Answer 1

The 2 div inside the 'screen' one must have position: absolute. You must that provide values for top and left to place them where you want. I will add a working fiddle. Here is a working 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;
}