Four staggered boxes on top of one another

JavaScript Is Disabled

Enable JS and reload this page.

/** * If JS turned off override the CSS to display * a grid rather than stack with no way for the * user to manipulate the z-index stack */ @media (min-width: 601px) { .wrapper { height: 100%; } .container { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 1rem; } .box:nth-child(1), .box:nth-child(2), .box:nth-child(3), .box:nth-child(4) { position: relative; top: 0; right: 0; left: 0; font-size: 2.5rem; width: 100%; } }

Click an element and it will change the z-index to place it on top.

As the viewport is too narrow the demo will not work, try again at a wider width.

Box 1

Box 2

Box 3

Box 4

You can find further details about this demo at Dave's Website.