Grid by Example

A collection of usage examples for the CSS Grid Layout specification.

Layering items

You can layer items in the Grid, using z-index to control the order that they stack. In this example I have boxes arranged on a grid, my box F is last in the source order and positioned on the Grid so it partly overlaps box D.

Without any z-index property it will display on top of box D. However I can add a z-index and control the position which works as you would expect if you have used the z-index property with positioned elements.

Read the specification | View example as full page

See the Pen Grid by Example 15: Layering items by rachelandrew (@rachelandrew) on CodePen.

Back to list of examples