Можно ли поместить дочерний элемент дочернего блока в тень родительского? - PullRequest
Новая
       24

Можно ли поместить дочерний элемент дочернего блока в тень родительского?

0 голосов
/ 01 февраля 2019

У меня есть код, который выглядит следующим образом: 

.motherbox {
  position: relative;
  width: 100px;
  height: 50px;
  box-shadow: 0 5px 2px 0;
  background: green;
  z-index: 10;
}

.child {
  position: relative;
  width: 50px;
  height: 100px;
}

.text,
.window {
  width: 50px;
  height: 50px;
}

.text {
  background: red;
}

.window {
  position: relative;
  background: yellow;
  z-index: 1;
}
<div class="motherbox">
  <div class="child">
    <div class="text"></div>
    <div class="window"></div>
  </div>
</div>

(Также на https://jsfiddle.net/sajphu2r/1/)

Box-shadow находится под «желтой рамкой».

Возможно ли этопоместить эту часть дочернего блока (желтого прямоугольника) под тень?

Я уже пробовал z-index без результата.

Необходим вывод: желтый прямоугольник под теньюзеленая коробка, красная коробка сверху зеленой коробки.

1 Ответ

0 голосов
/ 01 февраля 2019

Просто удалите все z-index из материнской коробки, и вы сможете разместить свой элемент позади него, указав отрицательный z-индекс: 

.motherbox {
  position: relative;
  width: 100px;
  height: 50px;
  box-shadow: 0 5px 2px 0;
  background: green;
}

.child {
  position: relative;
  width: 50px;
  height: 100px;
}

.text,
.window {
  width: 50px;
  height: 50px;
}

.text {
  background: red;
}

.window {
  position: relative;
  background: yellow;
  z-index: -1;
}
<div class="motherbox">
  <div class="child">
    <div class="text"></div>
    <div class="window"></div>
  </div>
</div>
...