Why is z-index ignored with position:static?

jquery html css z-index
ripper234 picture ripper234 · Dec 13, 2011 · Viewed 16.1k times · Source

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)

Answer

Quentin picture Quentin · Dec 13, 2011

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

Related questions

Slide right to left?

How can I have a div go from collapsed to expanded (and vice versa), but do so from right to left? Most everything I see out there is always left to right.

Read More
Click button copy to clipboard using jQuery

How do I copy the text inside a div to the clipboard? I have a div and need to add a link which will add the text to the clipboard. Is there a solution for this? <p class="content"&…

Read More
Refresh/reload the content in Div using jquery/ajax

I want to reload a div on click of a button. I do not want to reload the full page. Here is my code: HTML: <div role="button" class="marginTop50 marginBottom"> <input type="button" id="getCameraSerialNumbers" value="…

Read More