Question

jQuery("#X").css("z-index");始终在Webkit浏览器上返回“auto”。在Firefox上运行正常。

您似乎无法使用以下内容设置z-index：jQuery("#X").css("z-index",5);

测试用例如下：

<!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>

Answer 1

您需要指定使用z-index的位置。

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

立即在Chrome中修复它。

Answer 2

尝试

zIndex代替z-index。

Answer 3

Webkit浏览器的已知问题，详细here

我理解计算的z-index是自动时很困惑你专门用.css设置了一个，但是RAMilewski做得很好指出计算的z-index在不同的浏览器中会有所不同。我们可以撒谎（从某种意义上说）并说出正在应用的内容这样返回值是一致的，或者用户可以意识到如果不设置其他样式，则不会应用z-index z-index工作。我正在关闭wontfix，因为我怀疑这不会我们会改变的东西，但如果有人不同意，我们可以重新开放未来。

标记的分辨率无法修复。所以不要指望它很快就会消失。

Jqueryu UI的zIndex function似乎也有同样的问题BTW：

在Webkit浏览器上使用jQuery读取和设置z-index值

3 个答案: