Clipping

Clipping on the Web is more complicated than a simple DOM oriented hierarchy.

Some clips inherit through the DOM tree and some through the containing block ancestor tree. For position:absolute and position:fixed the containing block becomes closest positioned ancestor.

<p style="background: red;  overflow: hidden">
<span style="position: relative; top: 100px;">clipped by p</span>
<span style="position: absolute; top: 100px;">not-clipped by p</span>
</p>

position:absolute takes it out. It skips clips established by ancestors. It does not ignore masks and clip paths.

position:fixed is like position:absolute but uses the viewport as the containing block, except when one of its ancestors has a transform, or filter:

<p style="background: red; position:absolute; overflow: hidden">
<span style="position: relative; top: 100px;">clipped by p</span>
<span style="position: absolute; top: 100px;">clipped by p</span>
</p>

<p style="background: red; position:absolute; overflow: hidden">
<span style="position: relative; top: 100px;">clipped by p</span>
<span style="position: fixed; top: 100px;">not clipped by p</span>
</p>

<p style="background: red; position:absolute; overflow: hidden; transform: scale(1,1)">
<span style="position: relative; top: 100px;">clipped by p</span>
<span style="position: fixed; top: 100px;">clipped by p</span>
</p>

filter and transform contain position:fixed elements, opacity does not.

clip property forces a clip through the DOM hierarchy.

Another clip that inherits through the dom hiearchy is the root scroll frame's viewport clip.

https://searchfox.org/mozilla-central/rev/0688ffdef223dac527c2fcdb25560118c4e4df51/layout/generic/nsGfxScrollFrame.cpp#3578-3581

• ClipContentDescendants: Establish a clip that inherits through the content hiearchy
• ClipContainingBlockDescendants: Establish a clip that inherits thourgh the containing block hiearchy. This clip will effect descendents who's containing block is a descendent of us, but not a descendent who's containing block is not us.

A scrolled ancestor is not necessarily the descendant of that scrolled element.

An absolute position element is positioned relative to its nearest positioned ancestor, not necessarily the closest scrolled ancestor.

The clip property is similar to overflow:hidden but only affects position:absolute elements.

The only clips that you can escape are overflow ones.

Stacking context tree is a subset of the DOM tree.