What we did
January 2021 : The Z Index
For our first meeting this year we had a look at the Z Index property.
As a base we discussed the Code Drops article written by Sara Soueidan.
So what is the Z Index? In English we read left to right, the X axis and down the Y axis. Then these the Z index which determines the position of an item from front to back.
Here’s a diagram from the article
The HTML the browser will look at the HTML and read the page from top to bottom. That is what you place first on the page will appear first on the screen.
So, most pages start with html tag, then the head and the body. Inside the body we have a header then the main and the footer. Inside the main you may find the article and the aside. If that’s the way you have written your page that’s the way it will be rendered by the browser.
Then comes CSS, you can use CSS to change the way an item or tag appears, where it appears or if it appears at all, eg display : none.
As you will see from Sara’s article the Z index is dependant on position property. That position can’t be static. It has to be either
- relative
- fixed
- absolute or
- sticky
Here is an example for the W3 Schools site
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
This placed the image behind the text.
Notice the index has a negative number. That number determines where the item will fall in page.
The number can be positive, that is the higher the number is towards the front or a negative number, the higher the number the further to the back. In effect it’s the same thing however a negative number would be set behind any ordinary item.
The MND site has a lot of examples and we started with had a look at "Using Z Index"
We then considered the new properties of grid and flexbox and considered if Z index could be used with them.
There is a Sitepoint article on the z index and Flexbox
And this is a comment from Stack Overflow on the problem
Like you wrote in your question, elements do not need to be positioned for z-index to work in a flex container.
Flex items can participate in a z-index stacking order even with position: static, which is not true for other CSS box models (except Grid) where z-index only works on positioned element
So, it would appear that the Z index is available in both grid and flexbox.
Steve South
Web Design leader