CSS: How to position two elements on top of each other, without specifying a height?

Question

I have two DIVs that I need to position exactly on top of each other. However, when I do that, the formatting gets all screwed up because the containing DIV acts like there

Answer 1

Here's another solution using display: flex instead of position: absolute or display: grid.

.container_row{
  display: flex;
}

.layer1 {
  width: 100%;
  background-color: rgba(255,0,0,0.5);  // red
}

.layer2{
  width: 100%;
  margin-left: -100%;
  background-color: rgba(0,0,255,0.5);  // blue
}

    

        Lorem ipsum...
    
    

        More lorem ipsum...
    


    ...same HTML as above. This one should never overlap the .container_row above.