有没有办法实现将一个堆叠上下文的元素堆叠在另一个堆叠上下文的元素之间的视觉效果？答案

【问题标题】：Is there a way to achieve the visual effect of stacking the element of one stacking context in-between the elements of another stacking context?有没有办法实现将一个堆叠上下文的元素堆叠在另一个堆叠上下文的元素之间的视觉效果？
【发布时间】：2021-06-10 10:05:32
【问题描述】：

我有这个网格，其中每个单元格都是绝对定位的 div 元素的相对定位父级，该元素本身可以是包含 div 元素的值，也可以是一个此类相对定位的值元素的包装器元素，例如：

<div id="my-grid">
  <div class="base">
    <div class="wrapper">
      <div class="value">abc</div>
    </div>
  </div>
  <div class="base">
    <div class="wrapper">
      <div class="value">def</div>
    </div>
  </div>
  ..
</div>

包装元素及其子元素可以溢出右侧没有值的单元格。每个值或包装元素都必须设置其背景，以便它覆盖底层基本元素的背景（它自己的背景，如果溢出，它右侧的任何单元格）。

现在，每个单元格有时可能在其层次结构中具有另一个元素（“补丁”元素），其大小和位置与基本元素相同（即永远不会溢出），当可见时，应该在视觉上堆叠在任何元素之间包装器（背景）及其子（文本值）恰好位于网格中的同一位置，无论是补丁的单元格还是其左侧的其他溢出单元格。

想到的唯一方法是展平所有包装器和补丁，使它们成为同级，因此成为同一堆叠上下文的部分，但由于许多原因，这是不可接受的。

我愿意接受不同的设计/重构建议。另外，我想我在某处看到弹性容器中的元素可以在视觉上与另一个弹性容器的元素交错，但无法为此目的重现效果。

附言。还尝试了混合混合的不同实验，但结果在视觉上并不令人满意。

【问题讨论】：

请在您的 html+css 中提供最小可重现代码 sn-p，以便我们进行更深入的研究。
它没有任何用处，问题不是代码，而是方法。我需要一个关于如何在父级（包装器）和子级（值）之间获得 z-stacking 非兄弟元素的视觉效果的概念答案，或者完全不同但具有相同视觉结果的解决方案。跨度>
我知道这一点，但是，考虑到子/父关系在 css 中的工作方式 - 在进入 z 堆叠之前，有一个你从哪里开始的基线会将选项缩小到一个具体的答案。
@Capagris 下面是一个示例代码：codepen.io/damir_p/pen/xxRQery 带有 Lorem ipsum 文本的第一个单元格向右溢出到单元格 #2 上，部分溢出到单元格 #3 上。单元格#3 恰好有这个补丁元素，希望将其堆叠在单元格#1 包装器和值元素之间。如果单元格#3 本身有任何值，则单元格#1 只会溢出单元格#2，然后单元格#3 将有自己的背景（以防其文本向右溢出）。在任何一种情况下，patch 元素都应该在视觉上 z 堆叠在背景和它的文本之间。
附言。 JS 只能用于补丁，因为它动态地来来去去，而单元格被渲染并且是静态的，直到内容发生变化。

标签： css flexbox css-grid z-index mix-blend-mode

【解决方案1】：

这是真正的解决方案： https://codepen.io/damir_p/pen/XWNOPea

#b1 {
  &:before {
    @include cell;
    @include abspos;
    z-index: $z-background;
    content: attr( data-value);
    background-color: yellow;
    color: transparent;
    min-width: max-content;
  }
  &:after {
    @include cell;
    @include abspos;
    content: attr( data-value);
    z-index: $z-value;
  }
}

基本上它归结为在基本 div 元素中使用一个属性，然后使用它的两个伪类作为背景和文本值，而对于 patch 元素，最好保持标准 div。

【讨论】：