Спозиционировать элемент выше корневого родителя?

Question

[Natebash]

Всем привет -



У корневого родителя Table-Head: position: sticky; у элемента message-tooltip: position abosolute; у его родителя kitCell: position: relative. Есть ли какая нибудь возможно спозиционировать message-tooltip поверх table-head, сейчас у message-tiooltip: не работает z-index, как я понимаю из-за того что у них стек позиционирования разный.

Есть ли обходные пути у этой проблемы?

Comments

[Ankhena]

Нужно изменить контекст наложения.
Можно попробовать изменить z-index для TableBody.
Но кто знает, какие стили у вас там есть ещё.

Answer 1

[Alexandroppolus]

для всех всплывашек (тултипы, модалки и т.д.) - порталы

https://ru.reactjs.org/docs/portals.html

Comments

[Natebash]

Спасибо, сейчас гляну

[Natebash]

Alexandroppolus попробовал, разве это решает проблему - если ему нужны пропы конкретного компонента, + что бы он монтировался в дом именно там где и должен быть. А не поверх всех элементов дом дерева

[Alexandroppolus]

Natebash, всплывашка должна быть поверх всего остального. Соответственно её надо монтировать в дом отдельно, вне основного дерева. И вручную позиционировать относительно того элемента, на котором вызвали тултип. Монтировать там же, где этот элемент, не получится - из-за контекста наложения https://developer.mozilla.org/ru/docs/Web/CSS/CSS_...
см. пример.

[Natebash]

Alexandroppolus, Так если я буду монтировать его отдельно в другую часть дома, разве будет возможность спозиционировать ей относительно маленькой ячейки внутри таблицы? Это же не модальное окно которому без разницы где находится, и оно всегда сверху и по центру. Этот тултип явно логически связан и показывается на hover относительно маленького родителя. Или я не прав?

[Alexandroppolus]

Natebash, спозиционировать можно, но только на js - взять позицию ячейки getBoundingClientRect, потом придвинуть к ней тултип. Разумеется, это более сложный путь, но увы.
Для Реакта есть готовые тултипы, в том числе в библиотеках компонентов, можно взять их.