如何在 CSS 容器中定位具有 z-index 的元素（用于容器查询）？

Question

我对容器查询非常热衷。终于，这个CSS特性已经在所有浏览器中实现了。但是，当我创建多个相邻的容器，并在其中一个中放置一个绝对定位的z-index元素时，后面的容器会覆盖这个元素。

我的情况：z-indexed-menu covered

1. 菜单（位置：绝对，z-index：9）是深蓝色框的一部分，该框具有容器类型：内联尺寸
2. 但被轻蓝色框覆盖，该框也是容器类型：内联尺寸

个案研究：

.block {
  display: inline-block;
  background-color: darkblue;
  color: lightblue;
  margin: 2px;
  width: 100%;
}

.block.container {
  container-type: inline-size;
}

.popout {
  background-color: darkgreen;
  color: lightgreen;
  position: absolute;
  z-index: 9;
}

hr {
  margin-bottom: 4rem;
}

<div class="block">
  <p>Some content in regular inline-block</p>
  <div class="popout">
    <p>Popping out of it.</p>
    <p>Popping out of it.</p>
    <p>Popping out of it.</p>
  </div>
</div>
<div class="block">
  <p>Some content in regular inline-block</p>
</div>
<hr />
<div class="block container">
  <p>Some content in block with
    <pre>container-type: inline-size;</pre>
  </p>
  <div class="popout">
    <p>Popping out of it.</p>
    <p>Popping out of it.</p>
    <p>Popping out of it.</p>
  </div>
</div>
<div class="block container">
  <p>Some content in block with
    <pre>container-type: inline-size;</pre>
  </p>
</div>

https://codepen.io/gofix/pen/yLREXaN

如何应用容器类型而不引入新的绝对布局上下文。

我尝试给所有这些container-type: inline-size一个较低的z-index，这样做“有点”有效，但我不想用z-index填满整个页面。

- Ad van Pinxteren

---

虽然我已经添加了（必需的）代码-从你提供的Codepen中-到问题中，但是请在以后撰写问题时这样做，这样问题就更自包含，在链接腐烂随着时间推移的情况下，可能仍然更有用/相关。 - David Thomas

你需要学习堆叠上下文，因为我认为你不可能通过使用z-index填充整个页面来实现你的目标（而且那样的代码非常糟糕，将来难以维护）。 - Pete

如何在不引入新的绝对式布局上下文的情况下应用容器类型？你不能，你可以增加容器的z-index或考虑使用3D变换使弹出框置于顶部（请阅读重复内容）。 - Temani Afif

实际上，我的容器类型声明为下一个框架引入了一个新的堆叠上下文。因此，它将始终覆盖先前的框架。很遗憾，并非所有文档都告诉我们这一点，这使得容器查询难以真正有用。 - Ad van Pinxteren

感谢@Pete指引我正确的方向。这个在文档中缺失，但是我做出了贡献，现在我们都知道了！ - Ad van Pinxteren

Answer 1

解决你的问题的一种方法是交换块的顺序并将其包装在<div style="display: flex; flex-direction: column-reverse;">中。

<div style="display: flex; flex-direction: column-reverse;">
  <div class="block container">
    <p>Some content in block with
      <code>container-type: inline-size;</code>
    </p>
  </div>
  <div class="block container">
    <p>Some content in block with
      <code>container-type: inline-size;</code>
    </p>
    <div class="popout">
      <p>Popping out of it.</p>
      <p>Popping out of it.</p>
      <p>Popping out of it.</p>
    </div>
  </div>
</div>

如果这不是你想要的，我认为你必须接受后续堆叠上下文的呈现方式，并将应该在块边界之外呈现的元素从堆叠上下文中移出，例如：

<div class="block">
  <div class="container">
    <p>Some content in block with
      <code>container-type: inline-size;</code>
    </p>
  </div>
  <div class="popout">
    <p>Popping out of it.</p>
    <p>Popping out of it.</p>
    <p>Popping out of it.</p>
  </div>
</div>

（这需要将CSS选择器.block.container更改为.block > .container）

- Wiebe Cnossen

---

谢谢 https://stackoverflow.com/users/70868/wiebe-cnossen ，结果发现改变整个东西是我们唯一能做的事情 :( - Ad van Pinxteren