Menu
I'm trying to find an answer to the following question:
Is an element's z-index style its absolute stack order, or its stack order relative to its parent?
For instance, suppose I have the following code:
<div style="z-index:-100"> <div id="dHello" style="z-index:200">Hello World</div> </div> <div id="dDomination" style="z-index:100">I Dominate!</div> Which one will be in front - #dHello, or #dDomination?
That's just for examples. I've tried this in multiple places and results seem to vary. I'm seeing if anyone knows of an authoritative source for settling:
1) What are the actual standards regarding z-index (on this topic specifically)? 2) How do individual browsers vary in their actual implementation of this?
Thanks!
744
An element with greater stack order is always in front of an element with a lower stack order. Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky) and flex items (elements that are direct children of display:flex elements).
Positioning and order In order for z-index to have any effect at all, it needs to be applied to a positioned element, that means, an element with position relative , absolute , fixed , or sticky .
Yes: use position:relative; z-index:10 . z-index has no effect for position:static (the default).
When you set position: relative on an element then you establish a new containing block. All positioning inside that block is with respect to it. Setting z-index on an element inside that block will only alter its layer with respect to other elements inside the same block.
Z Index ( z-index) is a CSS property that defines the order of overlapping HTML elements. Elements with a higher index will be placed on top of elements with a lower index. Note: Z index only works on positioned elements ( position:absolute, position:relative, or position:fixed ).
Elements with a higher index will be placed on top of elements with a lower index. Note: Z index only works on positioned elements ( position:absolute, position:relative, or position:fixed ). In this example, you can see three boxes displayed on top of each other in different orders using z-index.
Many CSS beginners may start using relative and absolute positioning when constructing their web page layout, because they think that is very easy to position certain element to their desired location just by changing the top and left value in the CSS. Well, this might works but often is not a good practice.
If you remember math class, the Z in the Z-Index here refers to the Z-Axis of a three-dimensional Cartesian coordinate graph, or x, y, z. Just imagine that your monitor exists in three-dimensions and the Z-Axis extends out of your monitor towards you.
z-index is relative. See this detailed answer, which I wrote for a similar question.
If none of the other elements have a defined
z-index, usingz-index: 1will be fine.Model: How is the z-index determined?
z-index <div id=A> Auto 1 <div id=B> Auto 1.1 <div id=C style="z-index:1"></div> Manual 1 <div id=D></div> Auto 1.1.2 </div> <div id=E></div> Auto 1.2 </div> <div id=F></div> Auto 2First, the direct child nodes of the body are walked through. Two elements are encountered: #A and #F. These are assigned a z-index of 1 and 2. This step is repeated for each (child) element in the document.
Then, the manually set
z-indexproperties are checked. If twoz-indexvalues equal, their position in the document tree are compared.Your case:
<div id=X style="z-index:1"> Z-index 1 <div id=Y style="z-index:3"></div> Z-index 3 </div> <div id=Z style="z-index:2"></div> Z-index 2You'd expect #Y to overlap #Z, because a
z-indexof 3 is clearly higher than 2. Well, you're wrong: #Y is a child of #X, with az-indexof 1. Two is higher than one, and thus, #Z will be shown over #X (and #Y).
Here is a plunker to visualize this a little better, or try the snippet below ,
.redbox, .greenbox, .bluebox { height: 100px; width: 100px; position: relative; color: #fff; padding: 3px; } .redbox { background: red; z-index: 1; } .greenbox { background: green; top: 40px; left: 40px; z-index: 3; } .bluebox { background: blue; top: -20px; left: 20px; z-index: 2; }<div id=X class='redbox'>z: 1 <div id=Y class='greenbox'> z: 3</div> </div> <div id=Z class='bluebox'>z: 2</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
