Search code examples
cssgoogle-chrome-devtoolscss-gridchromiumz-index

Is this Chromium devtools z-index popup giving wrong/outdated advice?

I have a grid setup where I have several div elements that overlap each other. As I want to control which order they overlap in, I set the CSS z-index on some of them. When I then examine these elements in Chromium dev tools, I get the following:

devtools screenie

Is this advice not incorrect, probably because it was written before CSS grid was finalized? When an element in a grid is static, it seems like z-index most certainly does have the effect of controlling rendering order in the grid.

Solution

  • Assuming the element is a grid item (it's not clear from your image that that's the case), then yes, that advice is incorrect. The specification for z-axis ordering of grid items says:

    ... painting order of grid items is exactly the same as inline blocks [CSS2], except that order-modified document order is used in place of raw document order, and z-index values other than auto create a stacking context even if position is static (behaving exactly as if position were relative). Thus the z-index property can easily be used to control the z-axis order of grid items.

    Why it is incorrect can only be speculated at. I wouldn't like to say whether the advice is out-of-date or just mistaken.

    Flex items are treated similarly, although Chrome does not offer the same incorrect advice for them.