Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.0k views
in Technique[技术] by (71.8m points)

css - 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>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

You NEED to specify position to use z-index.

<h1 id="X" style='position:relative;'>Some Text</h1>

fixes it immediately in Chrome.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...