Menu
See this comment from jquery-ui
// Ignore z-index if position is set to a value where z-index is ignored by the browser // This makes behavior of this function consistent across browsers // WebKit always returns auto if the element is positioned I see that jquery's zIndex() returns 0 if the element is position: static.
Isn't z-index supported on position:static? (It works for me in Chrome, haven't tested cross-browser)
785
z-index only affects elements that have a position value other than static (the default). Elements can overlap for a variety of reasons, for instance, relative positioning has nudged it over something else. Negative margin has pulled the element over another. Absolutely positioned elements overlap each other.
The reason for this behavior is due to the natural stacking order on the webpage. These guidelines basically determine which elements will be on top and which will be on the bottom. Even if elements don't have their z-index set, there is a rhyme and reason to which ones will be on top.
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 .
z-index only works on positioned elements (relative, absolute, fixed, sticky) so if you set a z-index on an element with a static position, it won't work.
Because position: static means "Ignore all the positioning instructions from left, top, z-index, etc.".
'z-index' Value: auto | <integer> | inherit Initial: auto Applies to: positioned elements — http://www.w3.org/TR/CSS21/visuren.html#z-index
An element is said to be positioned if its 'position' property has a value other than 'static'.
— http://www.w3.org/TR/CSS21/visuren.html#positioned-element
76
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
