Как показать тень элемента, если применено свойство «overflow: hidden»?

Question

NebulaNomad

html , css , верстка

Как показать тень элемента, если применено свойство «overflow: hidden»?

Как можно реализовать тень для слайдов в слайдере, чтобы она не обрезалась при использовании свойства `overflow: hidden`? В моем коде на CodePen [ссылка](https://codepen.io/tracktor/pen/OJeNaJe) проблема становится заметной при переключении слайдов. Я пробовал использовать различные подходы, такие как псевдо-элементы с абсолютным позиционированием и задание `z-index`, но пока не было успеха. Как можно эту проблему решить и сохранить красивый дизайн слайдера?

22 июля 2024 г. 20:02

Ответы на вопрос 2

Похожие вопросы

Answer 1

Для того чтобы показать тень элемента, даже если применено свойство `overflow: hidden`, можно использовать псевдо-элемент `::before` или `::after` и абсолютное позиционирование. 

Для вашего слайдера на CodePen, вы можете попробовать следующий подход:

1. Добавьте псевдо-элемент с тенью к каждому слайду в слайдере:

```css
.slider__item {
  position: relative;
  overflow: hidden;
}

.slider__item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  z-index: 1;
}
```

2. Уменьшите `z-index` для слайдов, чтобы псевдо-элемент с тенью находился над слайдами:

```css
.slider__item {
  position: relative;
  overflow: hidden;
  z-index: 0; /* уменьшаем z-index слайдов */
}

.slider__item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  z-index: 1;
}
```

Это должно помочь сохранить тень слайдов при использовании свойства `overflow: hidden`. Попробуйте добавить эти стили к вашему коду на CodePen и посмотрите, как это работает.

Answer 2

Сделать для контейнера, у которого overflow:hidden, внутренний отступ 24 + 5 пикселей. Зачем здесь три дня биться, непонятно.