I really need to write this down, because it's not something you use every day, and when I do need to use it, I find I get mixed up all over again!
Yes, you can position content on top of other content, and you can place it with great precision using CSS grid. You can use areas to do it, but I in the end I found that defining placement using lines works better for me.
I means that I need to draw the grid I'm using and add the line numbers, because it can get pretty confusing otherwise (well, it does for me 😏).
What I need to remember (and that's why I'm writing this), is the sequence of line-numbers:
grid-row-start, grid-column-start, grid-row-end, grid-column-end
Some more handy properties:
For the parent:
- place-items (
auto | normal | start | end | flex-start | flex-end | self-start | self-end | center | left | right | baseline | first baseline | last baseline | stretch | initial | inherit; - place-content (shorthand for align-content and justify-content). If one value is provided, then it sets both properties.
For the child:
- place self (shorthand for align-self and justify-self; start-center-end (no comma) left-center-right)
Here's a very good article on the subject: Positioning overlay content with CSS Grid by Ryan Mulligan (on CSS-Tricks)