Side navigation
#9667 closed bug (wontfix)
Opened June 25, 2011 02:05AM UTC
Closed June 26, 2011 05:24AM UTC
jQuery .css can't read z-index value on Webkit browsers
Reported by: | RAMilewski | Owned by: | |
---|---|---|---|
Priority: | low | Milestone: | 1.next |
Component: | css | Version: | 1.6.1 |
Keywords: | Cc: | ||
Blocked by: | Blocking: |
Description
jQuery("#X").css("z-index"); always returns "auto" on Webkit browsers. Works ok on Firefox.
It also appears that you can't set the z-index with something like:
jQuery("#X").css("z-index",5);
Test case follows:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery CSS Z-index Fail</title> <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#X").css("z-index",5); $("#Y").append($("#X").css("z-index")); }); </script> <style type="text/css"> h1 {z-index: 3;} </style> </head> <body> <h1 id="X">Some Text</h1> <div id="Y"> Z-index is: </div> </body> </html>
A more complex test case can be found at http://netfools.com/anaglyph/
Attachments (0)
Change History (2)
Changed June 25, 2011 08:11PM UTC by comment:1
Changed June 26, 2011 05:24AM UTC by comment:2
component: | unfiled → css |
---|---|
priority: | undecided → low |
resolution: | → wontfix |
status: | new → closed |
I understand it being confusing that the computed z-index is auto when you've specifically set one with .css, but RAMilewski makes a good point that computed z-index will be different in different browsers. We could lie (in a sense) and say that what was set is being applied so that return values are consistent, or users can realize that the z-index will not be applied without setting the other styles to make z-index work. I'm closing wontfix as I suspect this will not be something we will change, but if anyone disagrees, we can reopen in the future.
This bug should be marked invalid.
This is not a jQuery problem. Webkit browsers will not return the z-index value specified in style sheets unless the element is also positioned.
h1: {
position: relative;
z-index: 3;
}
fixes the problem