How to overlay one div over another div

Question

I need assistance with overlaying one individual div over another individual div.

My code looks like this:

Answer 1

The new Grid CSS specification provides a far more elegant solution. Using position: absolute may lead to overlaps or scaling issues while Grid will save you from dirty CSS hacks.

Most minimal Grid Overlay example:

HTML

  
This is the content
  
Overlay - must be placed under content in the HTML

CSS

.container {
  display: grid;
}

.content, .overlay {
  grid-area: 1 / 1;
}

That's it. If you don't build for Internet Explorer, your code will most probably work.