html - 有没有办法把不同父元素的伪元素堆叠起来？

Question

我正在尝试创建一个包含各种图形元素的图像框。为此，我有以下 HTML 代码:

.image-description:after {
  content: '';
  position: absolute;
  background: #333333;
  opacity: 0.6;
}

.image-box:after {
  content: '';
  position: absolute;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0) 50%, rgba(232, 193, 30, 1) 50%);
  opacity: 0.85;
}

<div class="container">
  <div class="image-box" style="background-image: ... "></div>
  <div class="image-description">
    <h3>xxx</h3>
    <p>xxx</p>
  </div>
</div>

我想要的是按以下顺序显示元素:

1. 图片框
2. 图像描述:之后
3. 图像框:之后
4. 图片描述

所以我想在图像描述之前显示在 .image-box:after 中创建的线性渐变。有没有办法把 image-box 的 after 放在 image-description 和 image-description:after 之间？

Answer 1

_{(注意 - 我添加了一些额外的样式，例如背景和边框以提高可见度。)}

What I want is to display the elements in the following order:

1. image-box
2. image-description:after
3. image-box:after
4. image-description

不幸的是，我不认为你可以在 sibling 和他们的 parent 之间进行这种互动。

您可以 set a pseudo-element to have a lower z-index than its parent , 但你不能将伪元素设置为具有比其表亲更低的 z-index 。这是因为，为了让伪元素的 z-index 低于其父元素，您需要在该父元素中创建一个新的堆叠上下文，并且堆叠上下文不能混合。

因此，您可以希望得到的最好结果是这样的:

.container {
    border: 2px solid black; padding: 5px; /* These styles are for display purposes only */
    position: relative;
}
.image-box {
    border: 1px solid red; height: 20px; color: red; font-weight: bold; /* These styles are for display purposes only */
    position: relative;
    z-index: -1;
}
.image-box::after {
    content: 'box::after';
    position: absolute;
    left: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0) 50%, rgba(232, 193, 30, 1) 50%);
    opacity: 0.6;
    color: black; font-weight: normal; /* These styles are for display purposes only */
}
.image-description {
    border: 1px solid blue; top: 50px; /* These styles are for display purposes only */
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.image-description::after {
    content: 'description::after';
    position: absolute;
    background: #333333;
    opacity: 0.6;
    top: 0; 
    z-index: -1;
}

<div class="container">
  <div class="image-box">a</div>
  <div class="image-description">
    <h3>xxx</h3>
    <p>xxx</p>
  </div>
</div>