Как обойти overflow hidden элемент у которого позиция absolute?
Все привет.
У меня есть подложка ::before c позицией absolute, которая показывается при hover на блок товара, часть этого блока обрезается в слик слайдере, за счет того, что там на slick-list ставится overflow hidden, из-за это по краям немного блок обрезается.
Как решить вопрос ? Пробовал z-index, но что-то не выходит.
Смотреть тут: https://fabrika-kresel.site/ofisnye-kresla/
пс. пока работаю с версией 1920px, на других экранах может быть неккоретно.
Дополнительно:
Как решить вопрос ?
В общем-то банально: задать размер и паддинги родителю так, чтобы тень помещалась внутрь
Ответы:
Обычно в подобных ситуациях либо добавлял отступ Padding слева, чтобы полностью подложка была видна.
Либо же сам контейнер слайдера увеличивать и товары более по центру держать.
Типа: контейнер 700пх а сами товары внутри контейнера, который 600пх, чтобы по бокам было по 50пх для твоей подложки.
**Возможно не сработает из-за специфики слайдеров и слайды будут неправильно скроллиться**
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для обхода проблемы с элементом, у которого установлено свойство `overflow: hidden` и `position: absolute`, можно использовать следующий подход:
1. Создайте обертку для вашего элемента, которая будет иметь свойство `position: relative` и `overflow: visible`. Это позволит контенту элемента выходить за границы родительского элемента.
2. Установите позицию вашего элемента внутри обертки с помощью свойств `top`, `left`, `bottom`, `right`. Это позволит вам контролировать расположение элемента внутри обертки.
3. При необходимости, можно также использовать свойство `z-index`, чтобы контролировать порядок слоев элементов с абсолютным позиционированием.
Пример решения на языке PHP:
<div style="position: relative;overflow: visible"> <div style="position: absolute;top: 0;left: 0;z-index: 1"> <!-- Ваш контент здесь --> </div> </div>
Этот подход позволит вам обойти проблему с `overflow: hidden` и `position: absolute`, и контент вашего элемента будет отображаться корректно. Не забудьте проверить совместимость с другими стилями вашего проекта и при необходимости внести корректировки.