Как наложить тень внутрь родительского блока так, чтобы можно было взаимодействовать с дочерними элементами?
Когда я пытался это реализовать, столкнулся с тем, что моя тень в виде псевдоэлемента ::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>