CSS allows two main types of ordering in relation to grid items: the order in which they appear in a grid container and the order in which they are stacked when they overlap. The former is achieved using the order property and the latter the z-index property.
1. Ordering Grid Items Display Sequence
1.1. order
Like in the flexible box layout, the order property allows you to specify the order in which items are laid out in the grid container, which is by default the same order they appear in the source code. The property is non- inherited and takes an integer value, which can be positive or negative. It affects only grid items that are auto-placed and not those explicitly positioned. Figures 20.25 and 20.26 show its usage and result, in which the order value of grid item “B” is changed from 0 (the default) to -1. Because it affects only the visual order, the accessibility guidelines given in Chapter 19 for the use of the property in the flexible box layout apply to its use in the grid layout too.
2. Specifying Layer Positions for Stacked Grid Items
2.1. z-index
The layer ordering of elements is done with the z-index property, which allows you to control the z-axis order (i.e., vertical stacking order) of overlapping grid items. It generally works with grid in the same way as described in Chapter 12 for other elements. Grid items can be made to overlap by, for example, absolutely positioning them that way, using the position and offset properties (again, see Chapter 12), or extending the size of one grid item over another, using negative margins. The property is non- inherited and takes one of two values: auto (which is the default) or an integer value (positive or negative). The greater the integer is, the closer an item is to the user. Figures 20.27, 20.28, and 20.29 show the usage and the result.
In the example, the grid{} rule defines the grid container and a three- column-three-row grid. In the ,E{} rule, the negative margin value extends grid item “E” at all four edges and the z-index of 1 positions it on a higher layer than other items. The rules for the rest of the grid items simply specify background color. Notice in the middle image that the layer position of grid item “E” is 5th, which is its position in the HTML code.
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.