Как привязать елемент к другому елементу?

Question

[WarriorKodeK]

Всем привет. Есть у меня небольшая проблемка.
Существует 3 компоненты ( аккордионы ), у них есть у каждого свой colorPicker
Сейчас он появляется по клику на кружочек цветов, с правой стороны от компоненты. Мне надо что-бы он рендерился под каждым из этих кружков, независимо от ширины аккордиона и т.д

Вот как примерно должно это выглядеть

Когда кликнули на 3 елемент

Когда кликнули на 1 елемент

И так далее.

Вот код - https://codesandbox.io/s/ywyw4y8k1x

Я в CSS не силен, так что прошу помощи у вас.

P.S С position: absolute я пробовал, но вот именно подвязать компоненту пикера к определенному елементу у меня не получается

Answer 1

[Stalker_RED]

Если задать родителю position:relative, и дочерний блок (пикер) при позиционировании при помощи position:absolute будет уже позиционироваться внутри родительского блока, а не внутри окна.
Но .block-picker тогда нужно поместить не рядом с item-container, а внутрь.

Если не менять разметку, то можно ставить координаты при помощи js, но придется их пересчитывать, если будет меняться что-то в соседних блоках.

Comments

[WarriorKodeK]

Я пробовал первый вариант. Получается что пикер просто прячеться внутрь блока, а мне нужно вытащить его с потока.

[Stalker_RED]

WarriorKodeK, пикеру position:absolute, и он выпадет из потока, но если у родителя position:relative, то координаты при позиционировании будут считаться от родителя.

[Stalker_RED]

WarriorKodeK, добавил пример

[WarriorKodeK]

Stalker_RED, Ну вот дал родителю relative и пикеру absolute и он уехал - https://codesandbox.io/s/mzlwqzwpox
Возможно ли как то расчитывать через JS?

[Stalker_RED]

WarriorKodeK, ну так он же НЕ ВНУТРИ блока с position relative а рядом с ним.