div z-index恢復爲'自動'

-1

我正在使用jQuery來追加兩個與容器div重疊的div（class ='content'）。我想深度排序兩個子div
的JavaScript：div z-index恢復爲'自動'

$('.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' 和介紹logo z-index是'auto'。介紹logo類作爲'activePageContent'返回，那麼爲什麼不是introLogo div z-index 2？任何指針讚賞。

來源

2013-03-07 moosefetcher

似乎這裏http://jsbin.com/uxoveb/1/edit工作，除非我失去了東西..？ – gotohales 2013-03-07 16:48:05

位置：絕對固定它。在你鏈接到的jsbin中，你只能看到帶背景的div。沒有圖像被拉進另一個div來看它是在前面還是在後面。只是fyi ... – moosefetcher 2013-03-07 17:02:15

因爲您尚未設置介紹標誌和默認z-index的z-index，auto是否已設置？ – madhushankarox 2013-03-07 16:49:02

你可以包含容器.content div的CSS？

此外，它看起來像你從來沒有指定爲#introLogo的position: absolute;，因此它將忽略z-index。

跟進，我建議改變來自：

.activePageContent { 
    z-index: 2; 
}

到：

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

來源

2013-03-07 16:49:08 whoughton

這已經完成了。謝謝！我沒有意識到z-index需要絕對定位。 – moosefetcher 2013-03-07 16:55:07

div z-index恢復爲'自動'

回答

相關問題