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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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