求助：实现图片悬浮于两个div上方的HTML/CSS布局（Blazor组件）

• 用CSS定位+层级控制即可实现，核心步骤：
  1. 给图片的父容器设置position: relative，作为图片定位的参考基准
  2. 给悬浮图片设置position: absolute，通过top/left等值调整位置，让它覆盖在两个div上方
  3. 给图片设置足够高的z-index（比如z-index: 999），确保层级高于下方div

示例代码：

/* 父容器样式 */
.container-group {
  position: relative;
  padding-top: 50px; /* 预留图片悬浮空间 */
}

/* 悬浮图片样式 */
.floating-img {
  position: absolute;
  top: -30px; /* 向上偏移实现跨div覆盖 */
  left: 50%;
  transform: translateX(-50%); /* 水平居中 */
  z-index: 999;
  width: 100px;
  height: auto;
}

/* 下方div基础样式 */
.bottom-div {
  z-index: 1; /* 确保层级低于图片 */
  background: #fff;
  padding: 1.2rem;
  border: 1px solid #e5e7eb;
  margin-top: 8px;
}

• 统一字体栈，兼顾兼容性与可读性：

  .text-block {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  }
  

• 调整行高与字间距，优化阅读体验：

  .text-block {
    line-height: 1.6; /* 正文行高建议1.5-1.8 */
    letter-spacing: 0.015em;
  }
  

• 区分标题与正文的视觉层级：

  .section-title {
    font-size: 1.7rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.9rem;
  }
  .body-text {
    font-size: 1rem;
    color: #4b5563;
    font-weight: 400;
  }
  

• 长文本场景处理：

  .truncate-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .wrap-text {
    word-break: break-word;
    overflow-wrap: break-word;
  }
  

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