Effect of overflow on absolutely and fixed positioned elements
The overflow property primarily affects how content inside an element is clipped or scrolled when it overflows its box. However, it behaves differently for child elements that use position: absolute or position: fixed.
Absolutely positioned elements (
position: absolute) are taken out of the normal document flow and positioned relative to their nearest positioned ancestor (the nearest ancestor with apositionvalue other thanstatic).If that positioned ancestor has
overflow: hidden,auto, orscroll, the absolutely positioned child can be clipped by that ancestor’s overflow boundary.Fixed-positioned elements (
position: fixed) are usually positioned relative to the viewport and are not affected by the overflow of ancestor elements unless a parent has certain properties liketransform,filter, orperspectivethat create a new containing context.