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

.