Question

基于MDN的文档，z-index的默认值为auto。

当我尝试将z-index现在设置为1时：

$("body").css("z-index", 1);

并检索z-index属性，如下所示：

$("body").css("z-index");

它仍会返回auto。

为什么会发生这种情况？如何检索当前设置的z-index值？

Answer 1

默认情况下，z-Index不适用于position:static元素。

它仅适用于position:relative/absolute/fixed元素。

这可能有效：

elementSelector
{
    position:relative;
    z-index:1;
}

参考：z-index - CSS-Tricks

Answer 2

您需要设置元素的位置，然后只有z-index才能有效工作......

检查jsfiddle

<div id="hello">deepak sharma</div>
<input type="button" id="set10" value="set zindex = 10" />
<input type="button" id="set20" value="set zindex = 20" />
<input type="button" id="get" value="get" />

$(function(){
    $("#set10").click(function(){
        $("#hello").css({"z-index":"10","position":"relative"});        
    });
    $("#set20").click(function(){
        $("#hello").css({"z-index":"20","position":"relative"});
    });
    $("#get").click(function(){
        alert($("#hello").css("z-index"));
    });
});

或者您也可以在CSS中设置position:relative，然后就不需要在jquery代码中设置位置。

jsfiddle

使用.css（）方法更改后，为什么z-index值保持不变？

2 个答案: