Overlay Positioning Edge Cases

Each scenario places a detectable anti-pattern inside a layout context that can cause overlay misalignment.

1. Transform Ancestors

1a. translateY(0) container
This tiny text is inside a transform: translateY(0) container. The overlay should frame this text precisely.
1b. rotate(0deg) container
Tiny text inside a transform: rotate(0deg) container.
1c. scale(1) container
Cramped text inside a transform: scale(1) container.
1d. Nested transforms
Tiny text nested inside two levels of transformed parents.
1e. Transform + absolute child
Absolutely positioned tiny text inside transformed parent.

2. Closed Details

2a. Closed details with anti-pattern inside
Click to expand (closed by default) This tiny text is hidden inside a closed details element. No overlay should appear for it.
Cramped text also hidden inside closed details.
2b. Open details with anti-pattern inside
This details is open This tiny text IS visible because details is open. Overlay should frame it correctly.
2c. Nested details (outer open, inner closed)
Outer details (open)

Some visible content.

Inner details (closed) Hidden tiny text inside nested closed details.
2d. Transform inside closed details
Closed with transform inside
Tiny text inside transform inside closed details. Double trouble.

3. Sticky and Fixed Positioning

3a. Sticky header inside scrollable container
Tiny text in a sticky header.

Scroll this container to test sticky behavior.

More content to enable scrolling.

Even more content here.

Cramped text below the sticky header.

Additional content.

More filler text.

3b. Fixed footer (stays at bottom of viewport)

The fixed footer at the bottom of the page has tiny text. Its overlay should stay fixed too.

Tiny text in a fixed footer -- overlay should track this on scroll.

4. Overflow Hidden

4a. Content clipped by overflow:hidden

This paragraph is visible.

This tiny text is below the overflow cutoff, clipped but still in DOM.

This content is also clipped away.

4b. overflow:hidden + transform ancestor

Visible inside transform + overflow.

Clipped tiny text inside a transformed overflow:hidden container.

5. Position Offsets

5a. Relative position with top/left offset
This tiny text is shifted via position:relative + top/left offset.
5b. Absolute child in relative parent

Normal flow content at top.

Absolutely positioned tiny text at bottom-right.
5c. Negative top offset
Tiny text pulled upward via negative top offset.

6. Flex and Grid Centering

6a. Flex-centered anti-pattern
Centered tiny text inside a flex container.
6b. Grid-centered anti-pattern
Cramped text inside a grid-centered container.
6c. Flex with transform

7. Containing Block Creators

7a. will-change: transform
Tiny text inside a will-change: transform container.
7b. contain: layout
Tiny text inside a contain: layout container.
7c. filter: brightness(1)
Tiny text inside a filter container (creates containing block).
7d. backdrop-filter
Tiny text inside a backdrop-filter container.

8. Margin Collapse and Negative Margins

8a. Negative margin shifting element position
Tiny text pulled out of its parent via negative margins.

9. Combined Edge Cases

9a. Transform + sticky + overflow
Tiny text in sticky header inside transform inside scrollable overflow.

Scroll content line 1.

Scroll content line 2.

Scroll content line 3.

Cramped box scrolled below sticky.

Scroll content line 4.

Scroll content line 5.

9b. Closed details + transform + flex
Closed combo scenario
Triple-nested: closed details > flex > transform > tiny text.
9c. Grid + absolute + transform
Absolute inside grid inside transform: overlays must track all three contexts.
Absolute cramped box at bottom-right of grid.
9d. Overflow hidden + absolute breakout

Visible content.

Absolute-positioned tiny text that breaks out below overflow:hidden.
9e. Side-tab card inside transform + relative offset
This card has a side-tab border accent and is offset inside a transform container.