内容简介：Have you always found the concept ofBelow, I'll explain everything you need to know aboutLet’s quickly go over the basics. The default position value of any HTML element is
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 relative
2 relative
3 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 relative
2 relative
3 absolute
4 relative
5 relative
6 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.
以上所述就是小编给大家介绍的《Learn Z-Index Using a Visualization Tool》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Java性能优化权威指南
Charlie Hunt、Binu John / 柳飞、陆明刚 / 人民邮电出版社 / 2014-3 / 109.00 元
Java性能优化圣经！Java之父重磅推荐！ 本书由曾任职于Oracle/Sun的性能优化专家编写，系统而详细地讲解了性能优化的各个方面，帮助你学习Java虚拟机的基本原理、掌握一些监控Java程序性能的工具，从而快速找到程序中的性能瓶颈，并有效改善程序的运行性能。 Java性能优化的任何问题，都可以从本书中找到答案！一起来看看 《Java性能优化权威指南》 这本书的介绍吧!
