Gotcha: CSS transform breaks position fixed children

A position: fixed element stops being fixed relative to the viewport when an ancestor has a CSS transform.

Any ancestor with transform, filter, or perspective creates a new containing block for fixed descendants:

/ This breaks fixed positioning: /
.parent {
transform: translateX(0); / Even identity transform! /
}
.child {
position: fixed; / Now fixed relative to .parent, not viewport /
top: 0;
}

Workarounds:

1. Move the fixed element outside the transformed ancestor:

<div class="transformed">...</div>
<div class="fixed-element">...</div> <!-- Sibling, not child -->

1. Use JavaScript to calculate position:

const rect = element.getBoundingClientRect();
// Manually position based on viewport coords

1. Use position: sticky as alternative (if applicable)

1. Properties that create new containing block:

- transform (any value, even none!)
- filter
- perspective
- will-change: transform
- contain: paint
- backdrop-filter

1. Portal pattern (React/Vue):

Render the fixed element at document.body level via portal

Per CSS spec, a transform on an ancestor establishes a new containing block, overriding the viewport as the reference for fixed positioning.