在圖像上疊加 Div

Question

所以我有一個相對定位的<div> ，它有一個絕對定位的子<img> 。

<div style="position: relative;">
  <img src="image.png" style="position: absolute;" />
  <span id="overlay_text">OVERLAY</span>
</div>

問題是它需要在頂部（在 Y 軸上更高，或者更接近屏幕頂部），但它僅以距底部的距離為單位進行測量。

Answer 1

使用z-index和top 。 這會將 div 放在底部，圖像，然后將跨度（覆蓋）放在頂部。 要從頂部邊緣設置定位，請使用top ，如果您需要它在 Y 軸上高於它的父軸，它可以與負數一起使用。 下面的示例將跨度移動到其父 div 頂部上方 10px。

<div style="position: relative; z-index: 1;">
  <img src="image.png" style="position: absolute; z-index: 2;" />
  <span id="overlay_text" style="position: relative; top: -10px; z-index: 3;">OVERLAY</span>
</div>

Answer 2

在某些情況下，這是一個更好的解決方案，因此父 div 獲取圖像的高度：

<div style="position: relative; z-index: 1;">
  <img src="image.png" />
  <span style="position: absolute; top: 0px; z-index: 3;">OVERLAY</span>
</div>

Answer 3

我知道這是一個老問題，但我注意到有幾個使用z-index示例，這對於此用例可能不是必需的，並且可能會因數十個堆疊元素而出現問題。

注意：元素從下到上堆疊。 在這種情況下：

<span>OVERLAY</span>在<img />聲明。 因此， span堆疊在img之上。

 <div style="position: relative;"> <img src="https://upload.wikimedia.org/wikipedia/commons/6/67/Delta-shield.png" style="position: absolute;" /> <span id="overlay_text" style="position: relative; top: 8rem; margin-left: 80px">OVERLAY</span> </div>

可以在此處找到有關堆疊的更多信息。

Answer 4

取決於您正在尋找的確切內容，但基於@Joe Conlin 的答案的一個簡單示例是添加負的最高值。

還有對@Joe Conlin 的輕微修正，我認為跨度應該具有絕對位置而不是相對位置。

http://jsfiddle.net/KevinFarrugia/fj83ytwp/1/

<div class="parent">
  <img src="http://www.gstatic.com/webp/gallery/1.webp" />
  <span class="overlay">OVERLAY</span>
</div>

CSS：

.parent{
    position: relative;
    margin: 2em;
} 

.parent img{
    position: absolute;
}

.parent .overlay{
    position: absolute;
    top: -1em;
    text-align: center;    
    width: 100%;
}