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.

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

clip property forces a clip through the DOM hierarchy.

position:fixed is like position:absolute but goes to the out of the scroll frame

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

clip that inherits through the dom hiearchy root scroll frames 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.

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.