Codectionary / Developer documentation / CSS

Transforms and Fixed-Position Containing Blocks

A fixed-position element usually uses the viewport as its containing block, but certain ancestor properties change that relationship.

What it is and why to use it

A fixed-position element usually uses the viewport as its containing block, but certain ancestor properties change that relationship. A non-none transform is one such property. This is useful to understand when a supposedly viewport-fixed badge moves or clips with a component.

Common mistakes and limitations

Do not add transforms as a casual performance hint: they can also create stacking contexts and alter positioning. Other properties can establish containing blocks too. Inspect ancestors before increasing z-index or changing offsets.

Try the example

The example pairs editable CSS with its own HTML preview. Run it, then change one declaration at a time and compare the result. Locally, put the CSS in a style element in the document head or in an external stylesheet linked from the HTML. Feature support varies by browser and version; use the linked reference and a useful fallback where needed.

HTML used by this example

<div class="panel">The transformed panel contains the badge.<span class="badge">Fixed badge</span></div>

Syntax

transform: translateZ(0); /* may change a fixed descendant’s containing block */

Examples

Transforms and Fixed-Position Containing Blocks

Run the CSS against the supplied HTML, then experiment with the values.

.panel { position: relative; transform: translateZ(0); height: 10rem; border: 2px solid #2563eb; }
.badge { position: fixed; inset-block-start: .5rem; inset-inline-end: .5rem; padding: .5rem; background: #dbeafe; color: #172b4d; }
  1. The transform establishes a containing block for the fixed descendant.
  2. The badge’s insets are resolved against that panel rather than the preview viewport.
  3. Removing the transform changes the positioning reference. This explains a common surprise in animated application shells.
HTML used by this example
<div class="demo"><div class="panel">The transformed panel contains the badge.<span class="badge">Fixed badge</span></div></div>

Best practices

  • Do not add transforms as a casual performance hint: they can also create stacking contexts and alter positioning. Other properties can establish containing blocks too. Inspect ancestors before increasing z-index or changing offsets.
  • Inspect the relevant browser reference and test the browsers used by your audience.

Runtime & versions

Web browsers. Feature availability depends on the language and runtime version used by your project; consult the official reference below.

CSS specifications (modules)

Specifications & further reading