How CSS3 Transform Alters Stacking, Positioning, and Overflow Behaviors

Preface

A seemingly harmless CSS3 transform (e.g., scale(1) or translate(0,0)) can still have deep effects on an element’s layout, even when its visual appearance does not change.

1. Transform Raises an Element’s Stacking Context

When two elements overlap with a negative margin, the later element normally covers the earlier one. Adding transform changes this rule: the transformed element behaves as if it had position:relative, allowing it to rise above its siblings.

<img src="mm1"><img src="mm2" style="margin-left:-60px;">

After applying transform:

<img src="mm1" style="-ms-transform:scale(1);transform:scale(1);"><img src="mm2" style="margin-left:-60px;">

2. Transform Breaks position:fixed Stickiness

Normally position:fixed keeps an element stationary while the page scrolls, unaffected by sibling positioning. However, if the element’s ancestor has a transform, the fixed element behaves like position:absolute and scrolls with the page.

<p style="transform:scale(1);"><img src="mm1.jpg" style="position:fixed;" /></p>

3. Transform Alters overflow Interaction with absolute Elements

Without transform, an absolute element inside an overflow:hidden container is clipped only if the container or an ancestor has a non‑static position. Adding transform to the container (or any nested element) forces the absolute element to be hidden, regardless of positioning.

<p style="width:96px; height:96px; border:2px solid #beceeb; overflow:hidden;">
    <img src="mm1.jpg" style="position:absolute;" />
</p>

When the container also has transform, the absolute image is clipped in Chrome/Opera only if the transformed element is the one with overflow:hidden, while IE9+/Firefox hide the overflow as soon as any transform appears.

4. Transform Affects 100% Width of absolute Elements

Previously, an absolute element with width:100% measured against the nearest non‑static positioned ancestor (or the viewport). Once the ancestor has a transform, the 100% width is calculated relative to the transformed container, causing images to stretch or shrink unexpectedly.

Demo links in the original article show the stretched and compressed results across IE9+, Chrome, and Firefox.

Conclusion

The author invites readers to add more transform‑related quirks. Notably, on macOS Safari, using transform:translate3d(0,0,0) can prevent text rendering glitches when combined with transition or animation.