CSS transform cause the position to become 'relative'

Question

It seems like CSS transform interferes with relative positioning, as illustrated in the demo. How to make the transformed element not relative?

demo

<div class="relative container">
  This is a relatively positioned container
  <div class="absolute child">
    This is an absolutely positioned element
  </div>
</div>
<div class="translate container">
  This is a transformed container
  <div class="absolute child">
    This is an absolutely positioned element, still positioned relative to the transformed container
  </div>
</div>

What exactly are you trying to achieve. Both looks similar to me. — Abin Thaha, Aug 12 '21 at 06:49
Transform creates a positioning context just like position: relative; this is by design. — Rence, Aug 12 '21 at 06:53
the first duplicate is a generic one that deals with all the properties that do the same (including transform) — Temani Afif, Aug 12 '21 at 09:02

score 2 · Answer 1 · answered Aug 12 '21 at 07:37

I'm not sure that a result of the transform is to just give the element a position: relative.

Rather:

For elements whose layout is governed by the CSS box model, any value other than none for the transform property also causes the element to establish a containing block for all descendants. Its padding box will be used to layout for all of its absolute-position descendants, fixed-position descendants, and descendant fixed background attachments.

See the spec at: https://www.w3.org/TR/css-transforms-1/#transform-rendering

So, in your example the transform applied to the parent sets a new coordinate system and gives the absolutely positioned element its containing block.

If the transform is set to none then CSS will search back for the next ancestor which sets a containing block (if there isn't one it gets back to the root) to find the containing block for the absolutely positioned element.

CSS transform cause the position to become 'relative'

1 Answers1