求助：如何使border-image实现的水钻心形层叠在粉色背景上？z-index失效

当前HTML结构是#hearts包裹.header，.header作为子元素，默认会显示在父元素#hearts的border-image上方——因为元素的内容层优先级天生高于边框层，所以给两者设置相同的z-index根本不会改变这个层级关系。

方案一：调整结构为同级元素，通过定位叠加 #

把两个元素改成同级，用绝对定位让心形边框覆盖在粉色背景上：

<div class="header"></div>
<div id="hearts"></div>

.header {
  background-color: lightpink;
  height: 280px;
  padding: 20px;
  margin: -47px -44px;
  text-align: center;
  position: relative;
  z-index: 1; /* 低于心形边框的层级 */
}
#hearts {
  border-image: url(https://i.ibb.co/Z6fB3ft4/Untitled56-20250514005917.png) 85 repeat;
  border-width: 68px;
  border-style: solid;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2; /* 高于粉色背景 */
  pointer-events: none; /* 可选，让点击事件穿透到下方元素 */
}

方案二：给子元素设置负z-index（最小改动） #

不用改HTML，只调整.header的z-index，让父元素的边框显示在上方：

.header {
  background-color: lightpink;
  height: 280px;
  padding: 20px;
  margin: -47px -44px;
  text-align: center;
  position: relative;
  z-index: -1; /* 设为负，让父元素边框层级更高 */
}
#hearts {
  border-image: url(https://i.ibb.co/Z6fB3ft4/Untitled56-20250514005917.png) 85 repeat;
  border-width: 68px;
  border-color: black;
  border-style: solid;
  margin: -10px;
  position: relative;
}

方案三：用伪元素实现心形边框（最简洁） #

去掉多余的#hearts标签，用伪元素直接给.header加边框层：

<div class="header"></div>

.header {
  background-color: lightpink;
  height: 280px;
  padding: 20px;
  margin: -47px -44px;
  text-align: center;
  position: relative;
}
.header::after {
  content: '';
  position: absolute;
  top: -68px;
  left: -68px;
  right: -68px;
  bottom: -68px;
  border-image: url(https://i.ibb.co/Z6fB3ft4/Untitled56-20250514005917.png) 85 repeat;
  border-width: 68px;
  border-style: solid;
  z-index: 1;
  pointer-events: none;
}

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