When you use Photoshop--or any visual editing software--you have the concept of "layers". If your page is A4 size, and you create 10 layers, then it has 10 A4 sized invisible sheets stacked on top of each other. It's a simple concept that's so simple it's weird to explain it, and yet the browser does not have this essential concept needed for advanced compositing.

To accomplish the same thing in CSS you have to follow this process:

1. Create an outer box that is set to position: relative or any position that's not static.
2. Create an inner box that's set to position: absolute.
3. Set this inner box (the bottom layer) to top, bottom, left, right all to 0, which sticks the layer's dimensions to the same as the outer box.
4. Place your next layer on this like normal by putting it inside the outerbox.
5. Use the z-index: to alter the layers' ordering if the natural ordering isn't correct.

The secret that nobody tells you is position:absolute has a footgun which makes it behave differently depending on its outer box. If your outer box doesn't have a position set then your attempt to use position:absolute will cover the entire browser window, but if the outer box is given any other position setting then the position:absolute will cover the outer box.

So the next time a CSS guru says to you, "just use position:absolute", you can fire back a strategically placed sniper shot of, "Don't you mean use position:absolute inside another box set to position:relative or did you not know that?"

Using Named Grid Cells

The most important thing about this demo is using named grid cells using grid-template-areas: in the grid, and then using grid-area: in each element you want in the cell. First, I set the overlay:

overlay {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  grid-template-rows: auto;
  grid-template-areas:
  "topleft topright"
  "middle middle"
  "bottomleft bottomright";
}

You name the areas using "name name name" for each column, and you can set a cell empty using the dot (.) as a name. In the above example I have "topleft topright" for the first row, "middle middle" for the second row, and "bottomleft bottomright" for the last row. You'll also notice I used "middle middle" so that when I use that name it will cover both grid cells.

Once I have this setup I just have to give each cell a name. Here's the relevant part of the code from the demo:

one {
  grid-area: topright;
}

two {
  grid-area: middle;
}

three {
  grid-area: bottomleft;
}

Make sure you see how these are mapping from the original source so you know that it works. A very nice feature of this is you can change the positions of these tags without changing the HTML. You just give them a new grid-area: name and it will be put in that cell (or cells).