Ящик с тенью "переведенного" ящика ложится на ящик родного брата - PullRequest
Новая
       18

Ящик с тенью "переведенного" ящика ложится на ящик родного брата

0 голосов
/ 15 октября 2018

Ящик тень от ящика падает на ящик родного брата.Я могу использовать z-index, чтобы исправить это.Однако, если один из блоков переведен (например, немного подняться при наведении курсора мыши), тень снова падает на родного брата.Как это решить?Спасибо. 

.container {
  margin: 30px;
  padding: 10px;
}

div.shadow {
  height: 100px;
  width: 100px;
  background-color: #ff0;
  float: left;
  margin: 4px;
}

.shadow {
  position: relative;
}

.shadow:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  box-shadow: 0px 10px 1000px #000;
}

.shadow:hover {
  transform: translateY(-3px);
}

.shadow:hover::after {
  box-shadow: 0px 20px 1500px #000;
}
<div class="container">
  <div class="shadow"></div>
  <div class="shadow"></div>
  <div class="shadow"></div>
  <div class="shadow"></div>
</div>

1 Ответ

0 голосов
/ 15 октября 2018

Когда вы используете translate для parent, вы создаете новый стековый контекст , который помещает преобразованный элемент .shadow поверх его родных элементов.Чтобы предотвратить это, вы можете использовать другие свойства, кроме преобразования (например, top: -3px): 

.container {
  margin: 30px;
  padding: 10px;
}

.shadow {
  position: relative;
  height: 100px;
  width: 100px;
  background-color: #ff0;
  float: left;
  margin: 4px;
}

.shadow::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  box-shadow: 0px 10px 1000px #000;
}

.shadow:hover {
  top: -3px;
}

.shadow:hover::after {
  box-shadow: 0px 20px 1500px #000;
}
<div class="container">
  <div class="shadow"></div>
  <div class="shadow"></div>
  <div class="shadow"></div>
  <div class="shadow"></div>
</div>
...