圖層奇怪的css行爲

最近我在網站畫廊工作，並試圖在圖像前面製作描述標籤。所以，這是應該的樣子：圖層奇怪的css行爲

enter image description here

它的HTML：

<li class="project-item"> 
    <img src="images/project_example.jpg" alt=""> 
    <div class="annotation"> 
    <div class="annotation_head">Head</div> 
    <div class="annotation_footer">Footer</div> 
    </div> 
</li>

塊與.annotation類是絕對的，和.project項是相對的。但在此之前，我用另一種解決方案，看起來很奇怪，我不能解釋它的行爲。那就是：

enter image description here

我換成position: absolute規則與margin-top: -50px後，改變黑color紅色，爲了清楚。
奇怪的是，背景顏色從圖像中顯示出來，但它應該在它的前面，爲什麼？有沒有合理的CSS規則？

來源

2013-02-24 kirugan

向我們展示您的** CSS **。或者製作一個[jsfiddle]（http://jsfiddle.net/）。 – Vucko 2013-02-24 14:22:45

@Vucko更新了鏈接 – kirugan 2013-02-24 14:40:25

從'.slider .project-item .annotation'中刪除'position：static;'。這應該將整個'.annotation'放在前面。或者你想要一些其他的效果？ – Vucko 2013-02-24 14:49:42

你看到文本與背景分離的原因是因爲元素背景和前景是獨立的。

我給.project-itemli添加了一個黑色背景，您可以看到紅色子代bg正確地位於黑色父代bg的頂部。 .annotation出現在img之後的DOM中，因此這些前景也正確分層。如果您希望您的紅色註釋背景在li前景之上可見，那麼您需要在li.project-item範圍內啓動一個新的文檔流。

在這種情況下，所需的定位是通過.slider .project-item .annotation{ position: absolute;}來實現的，該定位目前被您的static定位覆蓋。

Backgrounds layered properly

來源

2013-02-24 16:35:20

是否記錄在某處，背景是分開的？對於哪些瀏覽器必須遵守一些規則 – kirugan 2013-02-24 17:02:01

W3C規範在14.1和14.2中對其進行了相當清晰的定義。「顏色」意味着前景。 http://www.w3.org/TR/CSS21/colors.html「構成堆疊上下文的元素背景畫在元素堆棧上下文的底部，低於該堆疊上下文中的任何內容。」 – 2013-02-24 17:40:37

感謝您的回答，但我認爲您給出的鏈接描述正確地反映了z-index，無論如何，我將在w3.org中搜索深入的解釋。 – kirugan 2013-02-24 18:45:41

圖層奇怪的css行爲

回答

相關問題