Clash Royale CLAN TAG#URR8PPP

Trying to use z-index with divs

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

2 Answers
2

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 .

Is this what you're looking for? To make one div on top of another you need to change one's position, like top&left or 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>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.