html - 在图像上叠加 Div

Question

所以我有一个 <div>相对定位，它有一个 child <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 轴上高于其父级，则可以将其与负数一起使用。下面的示例会将 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>