z-index-img和div作為子級

Question

我對z-index有問題。 我的<img>不會出現在<div>后面。

http://cssdesk.com/LGYZm <-這是代碼示例。

<img>和<div>都是另一個<div>的子元素，但是child-div應該出現在<img>前面。 在這種情況下， background-image不是一種選擇。

Answer 1

不確定您要問的是什么，我查看了您提供的鏈接，您是在嘗試完成頂部的內容，還是底部的內容？

無論如何，您有：

#bg {
    max-width: 100%;
    position: relative;
    z-index: auto;
}

#childbox2 {
    width: 34%;
    min-height: 500px;
    float: right;
    background: rgba(255, 255, 255, 0.6);
    position: relative;
    z-index: auto;
}

嘗試這個：

#bg {
    max-width: 100%;
    position: relative;
    z-index: 1;
}

#childbox2 {
    width: 34%;
    min-height: 500px;
    float: right;
    background: rgba(255, 255, 255, 0.6);
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
}

您的z-index就像您在原始帖子中提到的那樣，基本上就是堆疊順序。 但是，兩者都具有自動功能，瀏覽器可能無法識別（取決於您使用的瀏覽器）...因此，與讓兩個子元素都具有自動功能相比，您要使它們的實際順序顯示為實際順序。 因此，例如，如果您希望#bg位於＃childbox2的下方，只需將z-index：1放入#bg，將z-index：2放入＃childbox2，這意味着您的＃childbox2將位於頂部的#bg ....

另外，請盡量不要使用％（百分比）表示寬度和高度，請使用像素-根據我的經驗，最好使用像素;）希望能有所幫助，如果需要，請選中復選標記；）-如果這樣做沒有幫助，請解決問題多一點！

看看這個jsfiddle：

http://jsfiddle.net/6Mcqr/

在＃childbox2和#bg中，您將兩個位置都設為相對，將#bg保持為相對，但是將您的＃childbox2位置更改為absolute，頂部為0； 右：0；

Answer 2

問題不在於z-index ，而在於CSS的其他部分。

z-index不會從文檔流中刪除元素。 它僅影響堆疊順序。

您需要修改定位/布局邏輯，以便兩個元素以您想要的方式水平/垂直對齊。

注意：在這種情況下，因為文本在圖片之后，所以文本自然會在堆疊順序中更高。