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'。介绍徽标类作为'activePageContent'返回，那么为什么不是introLogo div z-index 2？任何指针都赞赏。

Answer 1

您是否可以为容器.content div？

添加css

此外，您似乎从未指定position: absolute;的{{1}}，因此会忽略#introLogo。

要跟进，我建议改为：

z-index

为：

.activePageContent {
    z-index: 2;
}

div z-index恢复为'auto'

1 个答案: