0

Как наложить тень внутрь родительского блока так, чтобы можно было взаимодействовать с дочерними элементами? Когда я пытался это реализовать, столкнулся с тем, что моя тень в виде псевдоэлемента ::before перекрывала все дочерние блоки собой

.parent {
  width: 100px;
  height: 100px;
  background: yellow;
}

.parent::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  box-shadow: 0px -9px 16px -3px #000000 inset;
  z-index: 100;
}
<div class="parent">
  <div class="child">
    какой-то текст или элемент с которым надо взаимодействовать и который может перекрывать тень родительского блока, если не установить z-index родительского элемента выше.
  </div>
</div>

2
  • Я не понял, а чем вам box-shadow на самом элементе не угодил?
    – Alexey Ten
    8 ноя 2019 в 5:43
  • @AlexeyTen Дело в том, что тень на самом элементе перекрывается дочерними блоками. Ответ ниже мне помог.
    – 4rmr3d1
    8 ноя 2019 в 9:17

1 ответ 1

0

Чтобы не было таких "перекрытий" дочерними (или другими) элементами, пользуйтесь свойством pointer-events: none

.parent {
  width: 100px;
  height: 100px;
  background: yellow;
}

.parent::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  box-shadow: 0px -9px 16px -3px #000000 inset;
  z-index: 100;
  pointer-events: none;
}
<div class="parent">
  <div class="child">
    какой-то текст или элемент с которым надо взаимодействовать и который может перекрывать тень родительского блока, если не установить z-index родительского элемента выше.
  </div>
</div>

1
  • 1
    не знал про такое свойство. Спасибо !
    – 4rmr3d1
    8 ноя 2019 в 9:16

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.