Как сделать чтобы элемент позиционировался относительно главного элемента, а не родительского?

Question

[ArtJH]

https://codepen.io/ArtJH/pen/NWNeBJm

Столкнулся такой интересной задачей, мне нужно чтобы внутренний элемент реагировал на position не своего родителя, а родителя родителя.

Сейчас синий квадрат внутри серого, а нужно чтобы позиционировался от родителя, значит должен быть в левом верхнем углу.
Position у элементов нельзя менять. Также нельзя менять left top у child
Как это сделать? Ну или возможно вообще?

Comments

[RAX7]

.child {
  transform: translate(-30vw, -20vh);
}

[ArtJH]

RAX7, Этот способ костыльный. Цель не перенести квадрат у углу, а чтоб позиционировался в зависимости от супер родителя.

[RAX7]

ArtJH,

Position у элементов нельзя менять. Также нельзя менять left top у child

При таких условиях это единственный способ, если не прибегать к решениям на js.

[ArtJH]

RAX7, а как можно было бы реализовать на js? Не могу представить чет)

[RAX7]

ArtJH, берешь координаты верхнего левого угла у родителя относительного которого нужно позиционировать блок и координаты самого блока element.getBoundingClientRect(). Считаешь между ними разницу и сдвигаешь блок через transform: translate

Answer 1

[Андрей Федоров]

Нет никакого смысла при таком позиционировании держать .child внутри .parent-2
https://codepen.io/aliencash/pen/YzqdOYd

Comments

[ArtJH]

Смысл в том, что этот случай произошел с использованием drag and drop. Серый квадрат это куда мы дропим, а child это то что мы перетаскиваем. На мобилках переносится с использованием position absolute, left, top.