0

Usually, an element positioned using position: fixed can escape the bounds of its ancestors, even when they have overflow: hidden set.

.container {
    height: 100px;
    width: 100px;
    background: #fcc;
    overflow: hidden;
}

.child {
    position: fixed;
    left: 50px;
    top: 50px;
    height: 100px;
    width: 100px;
    background: #ccf;
}
<div class="container">
    <div class="child"></div>
</div>

There seems to be one exception: When an ancestor becomes the containing block for fixed elements (by having transform, perspective, filter or will-change: transform set, see MDN under fixed), in combination with overflow: hidden, fixed elements cannot escape the containing block anymore:

.container {
    height: 100px;
    width: 100px;
    background: #fcc;
    overflow: hidden;
    transform: translate(0, 0);
}

.child {
    position: fixed;
    left: 50px;
    top: 50px;
    height: 100px;
    width: 100px;
    background: #ccf;
}
<div class="container">
    <div class="child"></div>
</div>

I am finding it difficult to find information about this behaviour. Is this behaviour specifically documented anywhere?

I am developing a component that will be rendered inside such a containing block, and I have no control over the CSS of the containing block. My question is: Is there any way for the child to escape its containing block, be it with position: fixed or any other way?

cdauth
  • 6,171
  • 3
  • 41
  • 49
  • 1
    *Is this behaviour specifically documented anywhere?* --> you already found the MDN doc explaining this (with a link to the Spec) and you cannot avoid this, you have no way – Temani Afif Nov 17 '22 at 20:51
  • 1
    I'm quite frustrated about questions on Stack Overflow getting constantly marked as duplicates of other questions that talk about a similar topic but do not ask or answer the same question. The linked question is merely about the fact that certain CSS properties create a new containing block, which I already know and have established in my question, and about the fact that `top` works differently inside such a containing block, which is irrelevant to my question. – cdauth Nov 18 '22 at 11:10
  • 1
    My question was about how exactly a containing block for fixed elements works in connection with `overflow`, and whether there is any way to escape such a block. If the answer is that there is no way to escape the block, then that is a valid answer, but not a reason to close this question... – cdauth Nov 18 '22 at 11:11

0 Answers0