相关疑难解决方法(0)

我试图用:after伪元素CSS选择器设置元素的样式

#element {
    position: relative;
    z-index: 1;
}

#element::after {
    position:relative;
    z-index: 0;
    content: " ";
    position: absolute;
    width: 100px;
    height: 100px;
}

看起来::after元素不能低于元素本身.

有没有办法让伪元素低于元素本身？

我需要一个特定的动态元素始终出现在另一个元素的顶部,无论它们在DOM树中的顺序如何.这可能吗？我试过z-index(和position: relative),它似乎没有用.

我需要:

<div class="a">
    <div class="b"></div>
</div>

<div class="b">
    <div class="a"></div>
</div>

渲染时显示完全相同.出于灵活性目的(我计划分发需要此功能的插件),我真的不想求助于绝对或固定定位.

为了实现我想要的功能,我做了一个条件语句,其中重叠的子元素在阻塞其父视图的情况下将变得透明.它不完美,但它是一些东西.

今天，经过四个小时的调试，我很难学到了这个规则：

如果父级的z-index值为任何值，则无论您如何更改子级的CSS，父级元素都永远无法覆盖（堆叠在其子级元素之上）

我如何通过逻辑理解这种行为？规范在哪里覆盖？

代码（也在CodePen中）：

.container {
  width: 600px;
  height: 600px;
  background-color: salmon;
  position: relative;
  z-index: 99;
  margin-top: 20px;
  padding-top: 10px;
}

h1 {
  background-color: pink;
  position: relative;
  z-index: -1;
  font-family: monospace;
}

<div class="container">
  <h1>1. I can never be covered by parent if my z-index is positive.</h1>
  <h1>2. Even when my z-index is nagative, I still can never be covered if my parent has any z-index at all.</h1>
</div>