How to stop `translate` transform from causing an element to be treated as position relative?

user_1029146 0
Viewed 148

I have an absolutely positioned div which is a child of a statically-positioned parent container. I'm finding that applying transform: translateY(-50%) to the container is causing the child to treat this container as though it were position: relative.

When I check absolutelyPositionedChild.offsetParent, it points to the container. And when I get container.computedStyleMap().get('position'), it gives me CSSKeywordValue {value: 'static'}. So it is most certainly static, and yet it's being used as the reference. The second I disable the transform in the dev tools inspector, the offsetParent changes to a much higher div that contains the whole app - as intended.

Is this documented somewhere or am I misunderstanding something? More pertinently, is there a way to force it to not be treated as the offsetParent?

css-position css-transforms css html
1 Answers

According to the transform MDN,

If the [transform] property has a value different than none, a stacking context will be created. In that case, the element will act as a containing block for any position: fixed; or position: absolute; elements that it contains.

And according to the containing block MDN,

If the position property is static, relative, or sticky, the containing block is formed by the edge of the content box of the nearest ancestor element that is either a block container (such as an inline-block, block, or list-item element) or establishes a formatting context (such as a table container, flex container, grid container, or the block container itself).

So in this case, the parent element (a containing block that is statically-positioned) inherits the formatting context of the nearest block container. You will have an ancestor with position: relative that is cascading the formatting context.

To prevent this, you can make use of position: revert (though note that it won't work in Internet Explorer).

user_23416030
Related