How do you move left div to the background?

Question

I am trying to complete a style similar to the picture below me, whereby you have a left div partially in the background of a right div. Essentially, I want two side by side divs to be able to overlap each other, one in the background, and one in the foreground.

This is what I'm trying to achieve:

This is what I have so far:

 .wrapper{ display: grid; width: fit-content; align-items: center; grid-template-columns: 1fr auto; border: solid 2px black; }.left{ width: 150px; height: 115px; background-color: red; border: 2px red solid; z-index:-999; }.right{ width: 120px; height: 150px; background-color: blue; border: 2px blue solid; z-index: 999; }

 <div class="wrapper"> <div class="left"> </div> <div class="right"> </div> </div>

I've tried using the z-index field to no avail. Also, in addition to being able to control which element is in the background; on mouse hover, I would like the left div in the background to "float" to the foreground and increase in size partially, and the right div to "float" to the back and partially decrease in size.

I hope my problem was adequately described, thank you.

Answer 1

I think the display: grid is not helping you here as it's trying to confirm the child divs into a grid (ie, not overlapping).

I would just set the two sides to have whatever width you want (eg 50%) and use z-index to overlay them.

.wrapper {
  max-width: 400px;
}

.left, .right {
  width: 50%;
  height: 200px;
  position: absolute;
}

.left {
  background-color: red;
  left: 0;
}

.right {
  background-color: blue;
  right: 0;
  z-index: 99;
  -webkit-box-shadow: -4px 0px 15px -1px #000000; 
   box-shadow: -4px 0px 15px -1px #000000;
}

See https://jsfiddle.net/47bh3eqk/1/