htmlcssstacking-context

Stacking context between separate containers

I am building a grid in which i would have rows of 'cells' and items that overlay specific cells.

The goal is to emulate this enter image description here

This consists of one single parent div (the entire grid) and multiple cells (light blue). A card (yellow) is then a child of a particular cell, position: absolute, and overlayed over the top.

This enables the stacking context to remain the same throughout all cells as they are all part of the same parent.

What i want to do is to set each row of cells (a card sits on one row) in their own parent row div.

The issue is that the box shadow of the yellow cards does not show correctly in this format.

.container {
  width: 100px;
  height: 50px;
  position: relative;
}

.one {
  position: absolute;
  top: 0;
  border: 1px solid black;
  height: 100%;
  width: 70px;
  box-shadow: 5px 5px blue;
  background-color: lightyellow;
  
}
.two {
  background-color: coral;
  height: 100%;
  position: absolute;
  top: 0px;
  border: 1px solid grey;
}
.three {
  border: 1px solid green;
  width: 100%;
  height: 100%;
  background-color: lightblue;
}
<div class='container'>
  <div class='one'>
    One
  </div>
  <div class='three'>

  </div>
</div>

<div class='container'>
  <div class='two'>
    Two
  </div>
  <div class='three'>
   
  </div>
</div>

The box shadow does not in the row beneath.

enter image description here

I understand this is to do with the stacking context. But can this actually be done in the way I want?

Solution

  • Just make classes .one and .two the same z-index and greater than class .three's

    .container {
  width: 100px;
  height: 50px;
  position: relative;    }

.one {
  position: absolute;
  top: 0;
  border: 1px solid black;
  height: 100%;
  width: 70px;
  box-shadow: 5px 5px blue;
  background-color: lightyellow;
  z-index: 10;
  
}
.two {
  background-color: coral;
  height: 100%;
  position: absolute;
  top: 0px;
  border: 1px solid grey;
  z-index: 10;
}
.three {
  border: 1px solid green;
  width: 100%;
  height: 100%;
  background-color: lightblue;
  z-index: 5;
}
    <div class='container'>
  <div class='one'>
    One
  </div>
  <div class='three'>

  </div>
</div>

<div class='container'>
  <div class='two'>
    Two
  </div>
  <div class='three'>
   
  </div>
</div>