HTML/CSS实现SVG rect、img、上层元素分层排布，z-index无效问题咨询

问题核心原因 #

• SVG 内部元素的 z-index 仅在 SVG 内部的渲染顺序中生效，无法跨出 SVG 元素作用于外部 DOM 节点，整个 SVG 会作为一个独立整体参与外部 DOM 的堆叠排序，因此你给 SVG 内部的 .front 组设置的 z-index 无法覆盖外部的 img 元素。
• 你第二版拆分两个 SVG 的尝试中，给所有 SVG 统一设置了 z-index: -1，导致放文本线条的顶层 SVG 层级依然低于 img，自然会被图片盖住。

正确实现方案 #

给父容器开启定位上下文，拆分三个独立层级分别设置 z-index 即可实现预期效果：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>层级实现</title>
    <style>
      .img-overlay-wrap {
        position: relative;
        width: 500px;
        height: 300px;
      }
      svg {
        position: absolute;
        top: 0;
        left: 0;
        width: 500px;
        height: 300px;
      }
      /* 底层背景SVG */
      .svg-bg {
        z-index: 1;
      }
      /* 中间层图片 */
      .img-overlay-wrap img {
        position: absolute;
        top: 20px;
        left: 80px;
        height: 200px;
        z-index: 2;
      }
      /* 顶层文本线条SVG */
      .svg-front {
        z-index: 3;
        background: transparent;
      }
    </style>
  </head>
  <body>
    <div class="img-overlay-wrap">
      <h1>Header</h1>
      <!-- 底层仅放背景rect的SVG -->
      <svg class="svg-bg">
        <rect x="0" y="0" width="500" height="300" fill="#dcd1c4"></rect>
      </svg>
      <!-- 中间层图片 -->
      <img
        src="https://4.bp.blogspot.com/-6QFHkPCFUJE/US10_Byu7TI/AAAAAAAADm0/zRcsPaMQpp8/s1600/pink+camellia.jpg"
        alt="示例图"
      />
      <!-- 顶层仅放文本、线条的SVG -->
      <svg class="svg-front">
        <text style="fill: #538b01;" x="150" y="150">SVG Text</text>
        <line x1="34" y1="47" x2="279" y2="47" stroke="black" />
      </svg>
    </div>
  </body>
</html>

注意：SVG 文本的颜色需要用 fill 属性设置，你之前写的 color 对 SVG 文本不生效。

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