内容简介：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》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
并行计算导论
Ananth Grama、George Karypis、张武、毛国勇、Anshul Gupta、Vipin Kumar、程海英 / 张武、毛国勇、程海英 / 机械工业出版社 / 2005-1-1 / 49.00元
《并行计算导论》(原书第2版)全面介绍并行计算的各个方面，包括体系结构、编程范例、算法与应用和标准等，涉及并行计算的新技术，也覆盖了较传统的算法，如排序、搜索、图和动态编程等。《并行计算导论》(原书第2版)尽可能采用与底层平台无关的体系结构并且针对抽象模型来设计处落地。书中选择MPI、POSIX线程和OpenMP作为编程模型，并在不同例子中反映了并行计算的不断变化的应用组合。一起来看看 《并行计算导论》 这本书的介绍吧!
