-1

jQuery を使用して、コンテナ div (class='content') に重複する 2 つの div を追加しています。2 つの子 div を深度ソートしたい
:

$('.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 ロゴ クラスは「activePageContent」として返されるのに、なぜ introLogo div の z-index 2 ではないのでしょうか? 任意のポインタをいただければ幸いです。

4

1 に答える 1

1

コンテナ.contentdiv の CSS を含めることはできますか?

また、 に を指定しないように見えるposition: absolute;ため、#introLogoは無視されz-indexます。

フォローアップするには、次から変更することをお勧めします。

.activePageContent {
    z-index: 2;
}

に：

.activePageContent {
    position: absolute;
    z-index: 2;
}
于 2013-03-07T16:49:08.447 に答える