jquery - div z-index 恢复为“自动”

Question

我正在使用 jQuery 将两个重叠的 div 附加到容器 div (class='content')。我想对两个子 div 进行深度排序：
javascript：

$('.content').append('<div id="activePage"></div>');
    var pageContainer = $('#activePage');
    pageContainer.addClass("activePage").css('top', 136);
    pageContainer.append('<div id="pageBacking"></div>');
    $('#pageBacking').addClass("pageBacking");

    pageContainer.append('<div id="introLogo"></div>');
    $('#introLogo').append('<img src="file://<path to image here>/image.png" />');
    $('#introLogo').addClass("activePageContent");          
    console.log("backing z-index = "+$('#pageBacking').css("z-index"));
    console.log("intro logo z-index = "+$('#introLogo').css("z-index"));
    console.log("intro logo class = "+$('#introLogo').attr("class"));

的CSS：

.pageBacking {
    width: 736px;
    height: 562px;
    position: absolute;
    border-radius: 30px;
    opacity: 0.9;
    background: #01AEF0;
    z-index: 1;
}

.activePageContent {
    z-index: 2;
}

console.logs 说后备 z-index 是“1”，介绍徽标 z-index 是“auto”。intro logo 类返回为“activePageContent”，那么为什么 introLogo div z-index 不是 2？任何指针表示赞赏。

Answer 1

您可以包含容器.contentdiv 的 css 吗？

此外，您似乎从未指定position: absolute;for ，#introLogo因此它将忽略z-index。

为了跟进，我建议更改：

.activePageContent {
    z-index: 2;
}

到：

.activePageContent {
    position: absolute;
    z-index: 2;
}