0

I had a problem with setting box-shadow over the element that has a sibling with background, almost identical to Box-shadow over next sibling div

Solution with position: relative and z-index worked but I don't understand why. Could someone please explain?

#all {
  width: 200px;
}

#header {
  background-color: white;
  height:20px;
  box-shadow: 0 5px 5px red;
  position: relative;
}

#body { 
  height:100px;
  background-color: #ccc;
}
<div id="all">
<div id="header">
header
</div>
<div id="body">
</div>
</div>
F. Müller
  • 3,969
  • 8
  • 38
  • 49
kmandziuk
  • 13
  • 1
  • z-index made one sibling element over another, so it shows first and that's why it has box-shadow, without z-index, all elements are next to each other and you can't see box-shadow. I think this answers your question, if I understood it properly. – Никола Тошић Aug 13 '20 at 11:51
  • @НиколаТошић, it is not only about the z-index because z-index alone wasn't a solution. However linked https://stackoverflow.com/questions/52694564 is an answer. – kmandziuk Aug 13 '20 at 12:06

0 Answers0