Как не дать скрывать блок с абсолютой из род.компонента со скроллом?
Как не дать скрывать блок с абсолютой из род.компонента со скроллом?
snippet
При наведении на красный блок, срабатывает hover эффект и должен поверх появится зеленый блок.
На данный момент его скрывает overflow..
Нашла такую статью - клик, но оно работает на первый div внутри листа...
Буду рада помощи!
Дополнительно:
но оно работает на первый div внутри листа...
Не видно, что вы делаете, но думаю, что работает-то оно на все элементы, только позиционируете вы их в одно и то же место.
Либо в разметке вынуть зеленый из блока с overflow и решать на js, связывать красный с зеленым, например, по data-атрибутам.
Уберите position: relative; из .box
Но вообще, я бы советовал использовать что-то вроде tippyjs так как все эти трюки с позиционированием могут аукнуться.
- Спасибо большое за наводу с библиотекой tippyjs, очень классная она как раз решает мою проблему. Согласна что трюки с позиционированием беда.
Думала с помощью js это все обойти, но библиотека прям делает то что нужно. спасибо еще раз!
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы предотвратить скрытие блока с абсолютным позиционированием из родительского компонента со скроллом, можно использовать следующий подход:
1. Первым шагом является установка свойства position: relative; для родительского компонента, в котором находится блок с абсолютным позиционированием. Это позволит установить точку отсчета для абсолютного позиционирования внутри данного блока.
2. Далее необходимо установить свойство overflow: visible; для родительского компонента. Это позволит контенту внутри блока с абсолютным позиционированием быть видимым за пределами границ родительского компонента.
3. При необходимости можно также использовать свойство z-index для управления порядком слоев элементов на странице. Например, если блок с абсолютным позиционированием должен быть поверх других элементов, то можно установить ему более высокий z-index.
Пример кода на языке PHP:
.parent { position: relative; overflow: visible; } .absolute-block { position: absolute; top: 0; left: 0; z-index: 1; }
Следуя этим рекомендациям, вы сможете предотвратить скрытие блока с абсолютным позиционированием из родительского компонента со скроллом и обеспечить правильное отображение контента на вашем веб-сайте.