如何设置子元素z-index低于父元素且不隐藏，实现父背景图覆盖子背景

父元素的背景图默认会显示在子元素下方，因为子元素属于父元素的堆叠上下文后代，常规z-index无法调整这个层级关系。在不能使用absolute定位的前提下，可以用CSS Grid实现元素重叠，让SVG背景覆盖在子元素背景色上方，同时保持原有布局不受影响。

实现步骤 #

1. 给父元素设置display: grid，开启网格布局，让内部元素可以共享同一网格区域。
2. 子元素和承载SVG背景的元素（或伪元素）都设置grid-area: 1/1，强制它们占据同一个网格单元格。
3. 承载SVG背景的元素设置宽高100%，确保覆盖父元素的整个区域。

代码示例（简洁版，用伪元素） #

<style>
  .parent-box {
    display: grid;
  }
  /* 用伪元素承载SVG背景，避免额外DOM元素 */
  .parent-box::after {
    content: '';
    grid-area: 1/1;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D\'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg\'%20version%3D\'1.1\'%20preserveAspectRatio%3D\'none\'%20viewBox%3D\'0%200%2010%2010\'%3E%20%3Cpath%20d%3D\'M%2010%200%20L%200%2010\'%20fill%3D\'none\'%20stroke%3D\'black\'%20stroke-width%3D\'1\'%2F%3E%3C%2Fsvg%3E');
    background-color: transparent;
  }
  .child-box {
    background-color: red;
    border-radius: 6px;
    padding: 1px;
    grid-area: 1/1;
  }
</style>

<div class="parent-box">
  <div class="child-box"></div>
</div>

代码示例（纯内联样式，适合快速测试） #

<div style="display: grid;">
  <div style="background-color: red; border-radius: 6px; padding: 1px; grid-area: 1/1;"></div>
  <div style="background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D\'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg\'%20version%3D\'1.1\'%20preserveAspectRatio%3D\'none\'%20viewBox%3D\'0%200%2010%2010\'%3E%20%3Cpath%20d%3D\'M%2010%200%20L%200%2010\'%20fill%3D\'none\'%20stroke%3D\'black\'%20stroke-width%3D\'1\'%2F%3E%3C%2Fsvg%3E'); background-color: transparent; grid-area: 1/1; width: 100%; height: 100%;"></div>
</div>

原理说明 #

• CSS Grid允许多个元素共享同一网格单元格，堆叠顺序遵循“后定义的元素在上方”的规则，因此承载SVG的元素（或伪元素）会自然覆盖在子元素上方。
• 父元素保持常规块级布局，不需要设置absolute或额外relative定位，完全不会破坏原有布局结构。

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