2

I am very enthousiastic about container queries. Finally, this CSS featured had landed in all browsers. But, when I create multiple subsequent containers, and I put a absolutely positioned z-indexed element in one, a following container covers this element.

My case: z-indexed-menu covered

  1. menu (position: absolute, z-index: 9) is part of the dark blue box that has container-type: inline-size
  2. but covered by the lightblue box that is also container-type: inline-size

Isolated case study:

.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

How can I apply container-type without introducing a new absolut-ish layout context.

I tried giving all those container-type: inline-size a low z-index, and that 'kinda' works, but I don't want to fill my entire page with z-indexes.

David Thomas
  • 249,100
  • 51
  • 377
  • 410
Ad van Pinxteren
  • 21
  • 2
  • While I've added the (required) code - from the Codepen you provided - to the question this time in future please do that when composing your question, that way the question is more self-contained and - in the event link-rot over time - might remain more useful/relevant. – David Thomas May 12 '23 at 14:23
  • 2
    You'll need to learn about stacking contexts as I don't think you are going to achieve your goal of filling your entire page with z-indexes (also that would be very bad code - awful to maintain in future) – Pete May 12 '23 at 14:32
  • *How can I apply container-type without introducing a new absolut-ish layout context.* --> you cannot, either increase the z-index of the container or consider 3D transform to make the popout on the top (read the duplicate) – Temani Afif May 12 '23 at 21:49
  • 1
    Turns out to be so that my container-type declaration introduces a new stacking context for the next box. So it will always cover the previous. Too bad not al documentation tells us this, and it makes container queries harder to really be useful. – Ad van Pinxteren May 13 '23 at 05:43
  • Thanks @Pete for pointing me in [the right direction](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context). This one was missing in the docs, but [I contributed](https://github.com/mdn/content/pull/26761) so now we all know! – Ad van Pinxteren May 26 '23 at 18:00

1 Answers1

0

One way to fix your issue is to swap the order of your blocks and wrap it in <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>

If that is not what you want, I think you must accept that this is the way subsequent stacking contexts are rendered and pull the elements that should render outside the borders of the block out of the stacking context, e.g.

<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>

(this requires the CSS selector .block.container to be changed to .block > .container)

Wiebe Cnossen
  • 464
  • 1
  • 6
  • 5
  • Thanks https://stackoverflow.com/users/70868/wiebe-cnossen, turns out to be that changing the whole thing is the only thing we can do :( – Ad van Pinxteren May 26 '23 at 18:01