Тень блока накладывается на соседний блок

Question

У меня есть неопределённое кол-во блоков с тенью которые генерируются динамически. Я размещаю их в нормальном потоке документа и происходит так, что тень нижнего накладывается на верхний. Я пробовал разные махинации с z-index, но ничего не помогло

Как избежать наложения на соседний элемент?

.box { 
  width: 200px;
  height: 100px;
  margin: 0 auto;
  background: #fafafa;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}

 div.box:nth-child(1) {
   width: 150px;
 }

 div.box:nth-child(3) {
   width: 130px;
 }

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

Answer 1

Заметил, что проблема в размытии теней с других сторон. Может, стоит сделать её поменьше? (Убавил 38 до 18)

.box { 
  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 18px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}

Answer 2

Решил. @Arcadiy навёл на мысль

Мы должны сделать тень с помощью :after а основному блоку поставить overflow-y: clip;

Где то видны переходы тени, но это не то, что меня волнует и это уже легко можно поправить, главный вопрос для меня решен - тень не налазит на соседний блок

.box { 
  position:relative;
  width: 200px;
  height: 100px;
  margin: 0 auto;
  overflow-y: clip;
  background: #fafafa;
}

.box:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: rgb(0 0 0 / 30%) 0px 19px 38px, rgb(0 0 0 / 22%) 0px 15px 12px;
    }

 div.box:nth-child(1) {
   width: 300px;
 }

 div.box:nth-child(3) {
   width: 330px;
 }

  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>

Answer 3

Как вариант -- добавить дочерний элемент с width: 100%; height: 100%; и фоном #fafafa, задать позиционирование и z-index. И в него уже пихать все содержимое, которое предназначалось элементам .box

.box { 
  width: 200px;
  height: 100px;
  margin: 0 auto;
  background: #fafafa;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}

 div.box:nth-child(1) {
   width: 300px;
 }

 div.box:nth-child(3) {
   width: 330px;
 }
 
 .box__inner {
  width:100%;
  height: 100%;
  background: #fafafa;
  position: relative;
  z-index: 10;
 }

<div class="box"><div class="box__inner"></div></div>
<div class="box"><div class="box__inner"></div></div>
<div class="box"><div class="box__inner"></div></div>
<div class="box"><div class="box__inner"></div></div>

БЛОГ НА HUSL

Тень блока накладывается на соседний блок

Ответы (3 шт):