CSS Positioning Inside iframe and Shadow DOM
Positioned elements inside an iframe or shadow DOM behave similarly to normal DOM elements, but their containing block and stacking context are scoped to the iframe document or shadow root, respectively.
An iframe has its own document and viewport;
position: fixedinside an iframe is relative to the iframe viewport, not the parent page.Absolute positioning inside an iframe or shadow DOM is relative to the nearest positioned ancestor within that scope.
Sticky elements respect the scrollable container within the iframe or shadow root, not the outer document.
CSS properties like
z-index,transform, andperspectivecreate stacking contexts confined to the iframe or shadow root.Testing is important, as interactions with the parent page or nested iframes can sometimes produce unexpected visual results.
In this example, .fixed-btn stays fixed relative to the iframe viewport. Scrolling the parent page does not move it; it only responds to scrolling inside the iframe.
Remember that
position: fixedinside an iframe is scoped to the iframe viewport.Inside shadow DOM, positioned elements only affect and are affected by elements within that shadow root unless
::partor::slottedis used.Use explicit positioning on ancestors to control containing block references.
Test across browsers and nested contexts, especially with mixed fixed, absolute, or sticky elements.
Be aware of z-index isolation in shadow DOM and iframes to prevent unexpected stacking issues.