Layering with Grid

If one item is explicity placed the others will move to accomodate it. So the other items must be explicity placed too.

To center the numbers first they are enclosed in a span tag. The boxes are set to display: flex;. And the span tag is set to margin: auto;. Without the span tags you could use justify-content: center; and align-items: center;

Box 2 is positioned using position: relative. With all boxes set to position: relative; the stacking context stays like the default: items lower in the HTML are on top of those that are higher.

Based on a video by Front End Beginners.