[ACCEPTED]-Z-index: How to make nested elements appear underneath their parent element-z-index
It doesn't work because you are applying 15 a z-index to the parent element which makes 14 the child element stack relative to the 13 other elements within the parent.
Once you assign an element 12 a value for z-index (other than auto), that element 11 establishes its own local stacking context. This 10 means that all of the element's descendants 9 have their own stacking order, relative 8 to the ancestor element.
So if the parent 7 has z-index: 9 and the child is z-index: 8, it's kind of like 6 assigning a z-index of 9, 8
See the article here for a better 5 explanation.
If you remove the z-index on 4 the parent and set the sibling element to 3 z-index: -1, that should work. I'm not sure about all 2 browsers, but it works in Chrome anyway.
Here 1 is the updated fiddle
Hope that helps.
You don't.
Instead, make the a be the "Sign 2 In" "button".
Something like 1 this: http://jsfiddle.net/5sqxQ/15/
Try setting the parent and siblings containers 2 position to relative. Its worked for me 1 before.
Look at the rules below for how elements 4 are stacked and you can easily come up with 3 your own solution.
ex. Like thirtydot said, give 2 "Sign In" .users > li > a a position, relative or absolute, and 1 z-index: 1
The Stacking order and stacking context rules below are from this link
Stacking Order within a Stacking Context
The order of elements:
- The stacking context’s root element (the
<html>element is the only stacking context by default, but any element can be a root element for a stacking context, see rules below)- You cannot put a child element behind a root stacking context element
- Positioned elements (and their children) with negative z-index values (higher values are stacked in front of lower values; elements with the same value are stacked according to appearance in the HTML)
- Non-positioned elements (ordered by appearance in the HTML)
- Positioned elements (and their children) with a z-index value of auto (ordered by appearance in the HTML)
- Positioned elements (and their children) with positive z-index values (higher values are stacked in front of lower values; elements with the same value are stacked according to appearance in the HTML)
When a Stacking Context is Formed
- When an element is the root element of a document (the
<html>element) - When an element has a position value other than static and a z-index value other than auto
- When an element has an opacity value less than 1
- Several newer CSS properties also create stacking contexts. These include: transforms, filters, css-regions, paged media, and possibly others. See https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
- As a general rule, it seems that if a CSS property requires rendering in an offscreen context, it must create a new stacking context.
More Related questions
We use cookies to improve the performance of the site. By staying on our site, you agree to the terms of use of cookies.