我使用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?任何指针都赞赏。
答案 0 :(得分:1)
您是否可以为容器.content
div?
此外,您似乎从未指定position: absolute;
的{{1}},因此会忽略#introLogo
。
要跟进,我建议改为:
z-index
为:
.activePageContent {
z-index: 2;
}