Reading and setting z-index values with jQuery on Webkit browsers
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>
You NEED to specify position to use z-index.
<h1 id="X" style='position:relative;'>Some Text</h1>
fixes it immediately in Chrome.
try
zIndex instead of z-index.
A known issue with Webkit browsers, detailed here
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.
Marked resolution is Won't fix. So don't expect this to go away anytime soon.
Jqueryu UI's zIndex function seems to have the same problem BTW:
加载中,请稍侯......
精彩评论