Learn Z-Index Using a Visualization Tool
source link: https://thirumanikandan.com/posts/learn-z-index-using-a-visualization-tool
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Have you always found the concept of z-index tricky? Did you give a z-index value of 99999 to a HTML element hoping it will be placed in front of everything in a page and it still didn’t work? If your answer is yes, you’ve come to the right place.
Below, I'll explain everything you need to know about z-index and have shared a nifty visualization tool that will help you change z-indexes of elements, re-order them using the drag and drop feature, and show you the changes in real-time.
Positioning and Stacking Order
Let’s quickly go over the basics. The default position value of any HTML element is static . Any element with the default value of static is a non-positioned element.
An element is a positioned element if it's position value is one of the following - relative, absolute, sticky, or fixed.
Every HTML element in a page can be either in front of (or) behind another element. This is known as the stacking order. For example - a pop-up is in front of the content behind it.
Let's see how that will look -
content
(position: relative)
pop-up #1
(position: absolute)
pop-up #2
(position: absolute)
Z-Index of a HTML Element
How do you determine the stacking order among positioned and non-positioned elements? This is where z-index helps us.
- Positioned elements with positive z-index values are placed in front of non-positioned elements.
- Positioned elements with negative z-index values are placed behind non-positioned elements.
A z-index can be any positive (or) negative number including zero. It has no effect on a non-positioned element — position value of static .
z-index takes care of the stacking order among the positioned elements themselves.
Make note of two key points:
- Fixed values — Though you can use any number as a z-index, try to use a fixed set of z-index values like — 0, 10, 20, 30, 40. Similarly, for negative values. This helps you to debug z-index issues quickly.
- Ordering — If two elements have the same z-index, their order in HTML determines which element is placed in front of the other one.
Here comes the fun part. Play with the div elements in the visualization tool below. Change the stacking order either by reordering the elements using the drag handleor by changing the z-index. Use the Reset link at any time to revert to the default configuration. The absolute positioned element won't change its position since it's anchored to its parent.
Reset
div # z-index position
1 3020100-10 relative
2 3020100-10 relative
3 3020100-10 absolute
div #
1
position:
relative
;
z-index:
10
div #
2
position:
relative
;
z-index:
20
div #
3
position:
absolute
;
z-index:
30
If you like what you read, follow me on twitter (or) subscribe to my mailing list to get new posts on front-end. No spam, I promise ;-)
Subscribe to get clear, concise posts on front-end
Join 100+ readers today!
Stacking Context
Let’s say you have the below HTML with positioned elements.
<body>
<div id='div1' style='position:relative; z-index:10' />
<div id='div2' style='position:relative; z-index:5'>
<div id='div3' style='position:absolute; z-index:100' />
</div>
</body>
Will the div3 element be placed in front of the div1 element since it has the higher z-index? The answer is no. This may seem surprising at first but it all comes down to how the HTML elements are grouped.
Note that div1 is a single element and it forms a group of one. div2 forms a group with div2 as the parent and div3 as the child. A positioned element forms a stacking context. The positioned element can be either a single element (or) a parent element with child elements.
Here is the key part - a child’s z-index has no effect outside its group. div3 ’s z-index determines its position in the stacking order only among its siblings and has no effect outside its group. This is the reason setting even a large value like 99999 to div3 won't place it in front of div1 .
Look at the code below. Here, div3 and div4 are siblings, and div3 will be placed in front of div4 since it has a higher z-index.
<body>
<div id='div1' style='position:relative; z-index:10' />
<div id='div2' style='position:relative; z-index:5'>
<div id='div3' style='position:absolute; z-index:100' />
<div id='div4' style='position:absolute; z-index:50' />
</div>
</body>
The child elements in a stacking context are ordered as follows —
- Positioned elements with negative z-index values
- Non positioned elements - elements with value static
- Positioned elements with a z-index value of auto
- Positioned elements with positive z-index values
Play with the visualization tool below that has multiple elements and stacking contexts. Note that div4 , div5 , and div6 are children of div3 .
Reset
div # z-index position
1 3020100-10 relative
2 3020100-10 relative
3 3020100-10 absolute
4 3020100-10 relative
5 3020100-10 relative
6 3020100-10 absolute
div #
1
position:
relative
;
z-index:
20
div #
2
position:
relative
;
z-index:
0
div #
3
position:
absolute
;
z-index:
30
div #
4
position:
relative
;
z-index:
30
div #
5
position:
relative
;
z-index:
10
div #
6
position:
absolute
;
z-index:
0
There is More...
Do only positioned elements create a stacking context? Not really. There are other scenarios in which an element can create one. An element that has opacity less than 1 (or) properties like transform, filter can create a stacking context. But, no worries. They behave the same way positioned elements do.
Have any more questions about z-indexes? Any other concepts you've always struggled with? Write me a tweet and I will get back to you.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK