How to properly use box-shadow?

Question

I'm struggling with this. I have a header with a shadow, and a content div below it. The shadow doesn't show up unless the content div has z-index -1, but then I can't click any of the elements in the content div. What am I missing?

.container {
  display: flex;
  flex-direction: column;
}

.header {
  background-color: green;
  box-shadow: 5px 10px rgba(0, 0, 0, 0.5);
  height: 60px;
  width: 100%;
}

.body {
  height: 300px;
  width: 100%;
  background-color: red;
  z-index: -1;
  position: relative;
}

<div class='container'>
  <div class='header'>
  </div>
  <div class='body'>
    <p onClick="(function() {
      alert('Testing');})()">
      TESTING
    </p>
  </div>
</div>

codepen

Temani Afif · Accepted Answer · 2020-06-18T10:22:06.490

Increase the z-index of the header instead of decreasing the one of the content:

.container {
  display: flex;
  flex-direction: column;
}

.header {
  background-color: green;
  box-shadow: 5px 10px rgba(0, 0, 0, 0.5);
  height: 60px;
  width: 100%;
  z-index:1;
}

.body {
  height: 300px;
  width: 100%;
  background-color: red;
}

<div class='container'>
  <div class='header'>
  </div>
  <div class='body'>
    <p onClick="(function() {
      alert('Testing');})()">
      TESTING
    </p>
  </div>
</div>

Or add z-index:0 to the container to keep the .body inside its stacking context and avoid it being behind the container (the issue you were facing)¹

.container {
  display: flex;
  flex-direction: column;
  position:relative;
  z-index:0;
}

.header {
  background-color: green;
  box-shadow: 5px 10px rgba(0, 0, 0, 0.5);
  height: 60px;
  width: 100%;
}

.body {
  height: 300px;
  width: 100%;
  background-color: red;
  z-index:-1;
}

<div class='container'>
  <div class='header'>
  </div>
  <div class='body'>
    <p onClick="(function() {
      alert('Testing');})()">
      TESTING
    </p>
  </div>
</div>

To better see the initial issue simply add a background to the container and you will notice how the .body is placed behind:

.container {
  display: flex;
  flex-direction: column;
  background:yellow;
}

.header {
  background-color: green;
  box-shadow: 5px 10px rgba(0, 0, 0, 0.5);
  height: 60px;
  width: 100%;
}

.body {
  height: 300px;
  width: 100%;
  background-color: red;
  z-index:-1;
}

<div class='container'>
  <div class='header'>
  </div>
  <div class='body'>
    <p onClick="(function() {
      alert('Testing');})()">
      TESTING
    </p>
  </div>
</div>

¹: For those with 'z-index: auto', treat the element as if it created a new stacking context, but any positioned descendants and descendants which actually create a new stacking context should be considered part of the parent stacking context, not this new one.^ref

Thank you! My problem was actually that my header had `position: static` in my code — Dex, Oct 14 '18 at 06:29

score 0 · Answer 2 · answered Oct 13 '18 at 14:13

Remove z-index from both header & body and remove position:relative from body to header

.container {
  display: flex;
  flex-direction: column;
}

.header {
  background-color: green;
  -webkit-box-shadow: 5px 10px 0px 0px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 5px 10px 0px 0px rgba(0, 0, 0, 0.5);
  box-shadow: 5px 10px 0px 0px rgba(0, 0, 0, 0.5);
  height: 60px;
  width: 100%;
  position: relative;
}

.body {
  height: 300px;
  width: 100%;
  background-color: red;
}

<div class='container'>
  <div class='header'>
  </div>
  <div class='body'>
    <p onClick="(function() {
      alert('Testing');})()">
      TESTING
    </p>
  </div>
</div>

score 0 · Answer 3 · answered Oct 13 '18 at 14:18

By Using z index element with greater value is always in front of an element with a lower value.

instead of giving -1 to body which is not something encouraged you should give a higher z index value to your div

.header
{
  ......
  ......
  z-index:1;
 }
 body
 {
  .......
  .......
      z-index:0; /* NOT IMPORTANT THOUGH IF YOU'RE NOT MESSING WITH -ve Z indexes
 }

score -1 · Answer 4 · answered Oct 13 '18 at 14:23

why you are not trying z-index: 1; in header

.container {
  display: flex;
  flex-direction: column;
}

.header {
  background-color: green;
  box-shadow: 5px 10px rgba(0, 0, 0, 0.5);
  height: 60px;
  width: 100%;
    z-index: 1;
        
}

.body {
  height: 300px;
  width: 100%;
  background-color: red;
  position: relative;
}

How to properly use box-shadow?

4 Answers4