What’s the rule of thumb on when to use one or the other?
And can someone provide a code example that shows how each is supposed to be used in their own specific way.
z-index: 0; should be used when you want to…
z-index: auto; should be used when you want to…
auto is the default z-index value that is initially used by the browser on all positioned elements.
In like manner, baseline is the default vertical-align value that is used by the browser.
Additionally, auto can also set a positioned child to be the same as it’s parent’s stacking level. If the parent has a z-index:10; and you set the child to auto then it becomes the same as it’s parent.
So z-index:auto is not necessarily the same as z-index:0; but there could be circumstances when auto might be the same as 0.
The box does not establish a new local stacking context. The stack level of the generated box in the current stacking context is the same as its parent’s box.
The big difference is that z-index:auto does not set a stacking context which means a positioned child can have a z-index take effect outside of the current context. If the parent had a z-index of zero (anything other than auto) then it becomes ‘atomic’ and a positioned child is forever trapped at the same level as the parent ( z-index:0 in this case). It does not matter what the child’s z-index may be because in respect of other positioned elements outside of this context it’s the parent’s z-index that will take effect if it is anything other than auto. The child element though will honour its own z-index in respect of other positioned elements under this same parent.
If the parent has z-index:auto then the positioned child’s z-index will determine if the element overlaps anything else outside this context.
Z-index numbers (including zero and negative numbers) are basically the same and just allow to determine if one element is above or below another in the same stacking context.
In the above example a child element cannot escape its parents context even with z-index:-1 when the parent has a z-index other than auto.
How do I place the circle over, on top of the image?
Right now it’s hiding behind it.
Are you talking about this ruleset…
.playButton svg {
width: 266px;
height: 200px;
}
I’m now on this:
Well after all the discussion on positioning and stacking.
The simple answer to your question from post #4 would be
.playButton svg {
width: 266px;
height: 200px;
position: absolute;
z-index: 1;
}
That worked, thanks.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.