Geek Answers Handbook

Z-index: how to make nested elements under your parent element

This fiddle should demonstrate the problem:

http://jsfiddle.net/5sqxQ/2/

I want the submenu to appear below the parent menu. Then I wanted to extend this with JavaScript to hide the menu from the bottom when hovering the parent element li.

He does not fuss about JavaScript, but he cannot understand how to style elements to achieve the desired level.

+4
source share
4 answers

No.

Instead, do a "Login" button.

Something like this: http://jsfiddle.net/5sqxQ/15/

+4
source

This does not work because you are applying a z-index to the parent element, which makes the stack of children relative to other elements inside the parent.

As soon as you assign an element a value for z-index (except auto), that element sets its own local stack context. This means that all of the descendants of an element have their own stacking order, relative to the ancestor element.

So, if the parent has z-index: 9 and the child is z-index: 8 , it kind of assigns the z-index of 9, 8

See the article here for a better explanation.

If you remove the z-index from the parent and set the sibling element to z-index: -1 , this should work. I'm not sure about all browsers, but it still works in Chrome.

Here is the updated fiddle

Hope this helps.

+8
source

Try to set the position of the parent and marriage brothers to relative. He worked for me before.

+1
source

See the rules below for how items are stacked and you can easily find your solution.

ex. As stated above, give "Sign In" .users > li > a position, relative or absolute and z-index: 1

The following are the stacking and stacking context rules from this link.

Stacking Order in the Stack Context

Order of items:

  • Stacking context root element (the <html> element is by default the only stacking context, but any element can be the root element for the stacking context, see rules below)
    • Cannot place child on root stack context element
  • Positioned elements (and their children) with negative z-index values ​​(higher values ​​add up to lower values, elements with the same value add up according to the appearance in HTML)
  • Undelivered items (ordered by appearance in HTML)
  • Positioned elements (and their children) with z-index of auto value (sorted by appearance in HTML)
  • Positioned elements (and their children) with positive z-index values ​​(higher values ​​add up to lower values, elements with the same value add up according to the appearance in HTML)

When a stacking loop is formed

  • When an element is the root element of a document ( <html> element)
  • If the element has a position value other than static and a z-index value other than auto
  • When an element has an opacity value of less than 1
  • Several new CSS properties also create stacking contexts. These include: conversions, filters, css regions, page media, and possibly others. See https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
  • Generally, it seems that if a CSS property requires rendering in an off-screen context, it should create a new stacking context.
0
source

More articles:


All Articles