如何在div中实现图片悬浮于文字上方？

要实现图片居中悬浮在文字上方（文字在后方），你需要通过定位属性控制元素的层叠关系和位置，以下是修改后的可运行代码：

<div style="position: relative; max-width: 700px; height: auto;">
  <!-- 文字层（位于后方） -->
  <div style="font-family: 'Londrina Outline', serif; font-weight: 400; font-style: normal; font-size: 120px; line-height: 121px; color: #741C28;">
    HONEY
    HONEY
    HONEY
  </div>
  <!-- 图片层（悬浮居中，位于上方） -->
  <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; height: 300px; background-image: url(https://i.imgur.com/z9lB88v.png); background-size: 100% 100%; z-index: 1;"></div>
</div>

关键调整说明： #

• 新增外层容器并设置position: relative：作为内部绝对定位元素的参考框，确保图片不会脱离目标区域。
• 图片div添加position: absolute：脱离文档流实现悬浮；通过top:50% + left:50% + transform: translate(-50%,-50%)实现精准居中。
• 图片div设置z-index:1：提升层级，确保显示在文字上方。
• 保留了你原有文字、图片的样式属性，仅调整定位逻辑。

内容的提问来源于stack exchange，提问作者Honey