How to make child of absolute parent be relative to the other parent

I have something like this

<div class="relative parent">
    <div class="absolute child1">
        <div class="absolute child2"></div>
    </div>
</div>

<div class="relative parent">
    <div class="absolute child1">
        <div class="absolute child2"></div>
    </div>
</div>

How can I make the child2 be relative to the parent (not child1)?

1 Reply

MarkBoots•2mo ago

there is a hacky way by creating a new containing block and stacking context. you could do that with the transform properties, for example transform: rotate(0) on the parent. then child2 can have position fixed. (will be relative to its containing block) here an example: https://codepen.io/MarkBoots/pen/xxNbRvj do you have an example of a usecase for this, because there might be other options.

Mark Boots

CodePen

xxNbRvj

...

Gaming

Programming

How to make child of absolute parent be relative to the other parent