CSS對齊 - 覆蓋下一個div

我在頁面上有兩個div - 圖像和一些文本。圖像被設置爲100％寬度，所以文本疊加在其下面。沒有設置任何職位。CSS對齊 - 覆蓋下一個div

然後，我在圖像上添加了一個標題，給容器div一個相對位置，圖像和標題爲絕對位置。

這導致我的文字在圖像下方消失。爲什麼？！？！我是新來的CSS，無法將這些對齊排列出來。

CSS：

.fullwidthimage { 
    width: 100%; 
    position: relative; 
    float: left; 
} 
.imageoverlay { 
    left: 0; 
    text-align: center; 
    position: absolute; 
    z-index: 100; 
    top: 50px; 
    width: 100%; 
    } 
    .imageundertext { 
     position: absolute; 
    }

的jsfiddle這裏：https://jsfiddle.net/4ksbz4c2/

感謝。

來源

2016-12-23 ts123

您正在使用浮動和絕對定位的結合，使得它很難知道哪些佈局是假設的樣子。你能解釋還是提供一個圖像？ –

在你的CSS中使用「z-index」。

如果圖像是固定的，我會將其設置爲背景圖像。

https://jsfiddle.net/4ksbz4c2/1/

.fullwidthimage { 
    height:100vh; 
    width:100vw; 
    position:fixed; 
    top:0; 
    left:0; 
    z-index:-1; 
    text-align:center; 
} 

.fullwidthimage img { 
    z-index:-1; 
    position:fixed; 
    top:0; 
    left:0; 
} 
.fullwidthimage h1 { 
    z-index:1; 
}

來源

2016-12-23 23:58:33

這會將文字置於圖像的頂部，但我希望它位於圖像下方，即下一頁。 – ts123

然後改變位置，而不是固定的; https://jsfiddle.net/4ksbz4c2/3/ –

好的，刪除圖像上的絕對位置（所以它只是相對於包含div和絕對覆蓋標題）工作和檢索我的文字到圖像的底部再次。但我不明白爲什麼！誰能解釋一下？ – ts123

CSS對齊 - 覆蓋下一個div

回答

相關問題