在图像上叠加 Div答案

【问题标题】：Overlay Div on image在图像上叠加 Div
【发布时间】：2014-02-19 03:58:04
【问题描述】：

所以我有一个具有相对定位的<div>，它有一个具有绝对定位的子<img>。

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

问题是它需要在顶部（在 Y 轴上更高，或者更靠近屏幕顶部），但它仅测量与底部的距离。

【问题讨论】：

你能发JSFiddle吗？
所以您需要<span> 位于<img> 之上？
看看this answer它应该做你想做的事。
默认情况下，<img> 具有left: 0; top: 0，如果没有其他 CSS 继承。这与没有position: absolute 的作用相同。你到底想要什么？ z-index 或将图像设置为背景图像有帮助吗？

标签： html css overlay

【解决方案1】：

我知道这是一个老问题，但我注意到有几个使用 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>

更多关于堆叠的信息可以在here找到。

【讨论】：

【解决方案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>

【讨论】：

为我工作，因为其他答案我失去了高度/宽度

【解决方案3】：

使用z-index 和top。这将在底部分层 div，在顶部分层图像和跨度（覆盖）。要从顶部边缘设置定位，请使用top，如果您需要它在 Y 轴上高于其父级，则可以使用负数。下面的示例会将 span 移动到其父 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>

【讨论】：

抱歉，我的意思是 Y 轴上的顶部，如屏幕上方的位置，而不是图像的顶部。我会在上面澄清。

【解决方案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%;
}

【讨论】：