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轴上高于其父级，则可以使用负数。下面的示例将跨度10px移动到其父div的顶部。

<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的几个示例，对于该用例而言可能不是必需的，并且可能会因成堆的数十个元素而成问题。

N.B .：元素从下到上堆叠。在这种情况下：

<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。

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%;
}

在图像上叠加Div

4 个答案: