I am thrilled about the introduction of container queries in CSS. It's great to see this feature now available across all browsers. However, I have encountered an issue when working with multiple consecutive containers and placing an absolutely positioned z-indexed element inside one of them - the following container ends up covering this element.
Here is an example of my case: z-indexed-menu covered
- The menu (position: absolute, z-index: 9) belongs to the dark blue box with
container-type: inline-size - It gets covered by the light blue box, which also has
container-type: inline-size
For a more detailed look at the issue:
.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
My question is, how can I apply container-type without creating a new kind of absolute layout context?
I attempted to give the elements with container-type: inline-size a lower z-index, which somewhat resolved the issue, but I prefer not to clutter my page with numerous z-index values.