How to get Box-Shadow to render above another element?

Question

I have the following code:

body {
  margin: 0px;
  padding: 0px;
}

a {
  text-decoration: none;
  color: black;
}

a:visited {
  color: black;
}

#superheader {
  width: auto;
  height: 100px;
  position: relative;
}

#superheader p {
  font-family: Sansation;
  font-size: 50px;
  display: block;
  line-height: 0.0
}

#superheader table {
  border: none;
  height: 100px;
  display: block;
}

#header {
  height: 140px;
  box-shadow: 0em 0em 1em 0.2em grey;
  position: relative;
  background-color: #E6E6E6;
  padding-left: 70px;
  padding-right: 70px;
  font-family: sans-serif;
}

.menuelement {
  width: 100px;
  height: 40px;
  text-align: center;
  padding-left: 10px;
  padding-right: 10px;
  float: left;
  position: relative;

}

.menuelement:hover {
  background-color: dimgrey;
  color: lightgray;
}

#header>a {
  line-height: 2.5;
}

#page {
  background-color: white;
  font-family: sans-serif;
  margin-left: 70px;
  margin-right: 70px;
  height: 100%;
  margin-bottom: 2em;
  box-shadow: 0em 0.6em 0.5em grey;
  padding-left: 2em;
  padding-right: 2em;
  padding-top: 0.1em;
  height: 6000px;
  position: relative;
}

<div id="header">
  <div id="superheader">
    <div style="margin: auto; width: 630px;">
      <table>
        <tr>
          <td><img src="images/memoji.png" width="100px" height="100px" alt="Icon" </td> <td>
            <p>Title</p>
          </td>
        </tr>
      </table>
    </div>
  </div>
  <a href="page1.html">
    <div class="menuelement">page1</div>
  </a>
  <a href="index.html">
    <div class="menuelement">Startseite</div>
  </a>
  <a href="page2.html">
    <div class="menuelement">page2</div>
  </a>
</div>
<div id="page">
  <h1>First Headline</h1>
  <h2>Second Headline</h2>
  <p>Some text.</p>
</div>

The box-shadow of the header-div is not rendering above the page-div but is hidden below it.
How can I get the box-shadow to render on the page-div, so that it is visible there?
Thank you very much for helping me!

Add some z-index on the element, like #header { z-index: 1; } — arvie, Oct 16 '20 at 16:41

score 4 · Accepted Answer · answered Oct 16 '20 at 16:42

The header box-shadow is hidden by the page selector because the header selector stack order is lower than the page selector.

So it is needed to modify the stack order of header selector to be higher than page selector.

That can be done using z-index. And add z-index: 1 (any value higher than 0 because default z-index: auto (= 0)) to #header class and you will see the box-shadow.

body {
  margin: 0px;
  padding: 0px;
}

a {
  text-decoration: none;
  color: black;
}

a:visited {
  color: black;
}

#superheader {
  width: auto;
  height: 100px;
  position: relative;
}

#superheader p {
  font-family: Sansation;
  font-size: 50px;
  display: block;
  line-height: 0.0
}

#superheader table {
  border: none;
  height: 100px;
  display: block;
}

#header {
  height: 140px;
  box-shadow: 0em 0em 1em 0.2em grey;
  position: relative;
  background-color: #E6E6E6;
  padding-left: 70px;
  padding-right: 70px;
  font-family: sans-serif;
  
  z-index: 5;
}

.menuelement {
  width: 100px;
  height: 40px;
  text-align: center;
  padding-left: 10px;
  padding-right: 10px;
  float: left;
  position: relative;

}

.menuelement:hover {
  background-color: dimgrey;
  color: lightgray;
}

#header>a {
  line-height: 2.5;
}

#page {
  background-color: white;
  font-family: sans-serif;
  margin-left: 70px;
  margin-right: 70px;
  height: 100%;
  margin-bottom: 2em;
  box-shadow: 0em 0.6em 0.5em grey;
  padding-left: 2em;
  padding-right: 2em;
  padding-top: 0.1em;
  height: 6000px;
  position: relative;
}

<div id="header">
  <div id="superheader">
    <div style="margin: auto; width: 630px;">
      <table>
        <tr>
          <td><img src="images/memoji.png" width="100px" height="100px" alt="Icon" </td> <td>
            <p>Title</p>
          </td>
        </tr>
      </table>
    </div>
  </div>
  <a href="page1.html">
    <div class="menuelement">page1</div>
  </a>
  <a href="index.html">
    <div class="menuelement">Startseite</div>
  </a>
  <a href="page2.html">
    <div class="menuelement">page2</div>
  </a>
</div>
<div id="page">
  <h1>First Headline</h1>
  <h2>Second Headline</h2>
  <p>Some text.</p>
</div>

score 2 · Answer 2 · answered Oct 16 '20 at 16:42

Simply set the z-index of the header.

body {
  margin: 0px;
  padding: 0px;
}

a {
  text-decoration: none;
  color: black;
}

a:visited {
  color: black;
}

#superheader {
  width: auto;
  height: 100px;
  position: relative;
}

#superheader p {
  font-family: Sansation;
  font-size: 50px;
  display: block;
  line-height: 0.0
}

#superheader table {
  border: none;
  height: 100px;
  display: block;
}

#header {
  z-index: 1;
  height: 140px;
  box-shadow: 0em 0em 1em 0.2em grey;
  position: relative;
  background-color: #E6E6E6;
  padding-left: 70px;
  padding-right: 70px;
  font-family: sans-serif;
}

.menuelement {
  width: 100px;
  height: 40px;
  text-align: center;
  padding-left: 10px;
  padding-right: 10px;
  float: left;
  position: relative;

}

.menuelement:hover {
  background-color: dimgrey;
  color: lightgray;
}

#header>a {
  line-height: 2.5;
}

#page {
  background-color: white;
  font-family: sans-serif;
  margin-left: 70px;
  margin-right: 70px;
  height: 100%;
  margin-bottom: 2em;
  box-shadow: 0em 0.6em 0.5em grey;
  padding-left: 2em;
  padding-right: 2em;
  padding-top: 0.1em;
  height: 6000px;
  position: relative;
}

<div id="header">
  <div id="superheader">
    <div style="margin: auto; width: 630px;">
      <table>
        <tr>
          <td><img src="images/memoji.png" width="100px" height="100px" alt="Icon" </td> <td>
            <p>Title</p>
          </td>
        </tr>
      </table>
    </div>
  </div>
  <a href="page1.html">
    <div class="menuelement">page1</div>
  </a>
  <a href="index.html">
    <div class="menuelement">Startseite</div>
  </a>
  <a href="page2.html">
    <div class="menuelement">page2</div>
  </a>
</div>
<div id="page">
  <h1>First Headline</h1>
  <h2>Second Headline</h2>
  <p>Some text.</p>
</div>

score 2 · Answer 3 · answered Oct 16 '20 at 16:43

body {
  margin: 0px;
  padding: 0px;
}

a {
  text-decoration: none;
  color: black;
}

a:visited {
  color: black;
}

#superheader {
  width: auto;
  height: 100px;
  position: relative;
}

#superheader p {
  font-family: Sansation;
  font-size: 50px;
  display: block;
  line-height: 0.0
}

#superheader table {
  border: none;
  height: 100px;
  display: block;
}

#header {
  height: 140px;
  box-shadow: 0em 0em 1em 0.2em grey;
  position: relative;
  background-color: #E6E6E6;
  padding-left: 70px;
  padding-right: 70px;
  font-family: sans-serif;
  z-index: 1;
}

.menuelement {
  width: 100px;
  height: 40px;
  text-align: center;
  padding-left: 10px;
  padding-right: 10px;
  float: left;
  position: relative;

}

.menuelement:hover {
  background-color: dimgrey;
  color: lightgray;
}

#header>a {
  line-height: 2.5;
}

#page {
  background-color: white;
  font-family: sans-serif;
  margin-left: 70px;
  margin-right: 70px;
  height: 100%;
  margin-bottom: 2em;
  box-shadow: 0em 0.6em 0.5em grey;
  padding-left: 2em;
  padding-right: 2em;
  padding-top: 0.1em;
  height: 6000px;
  position: relative;
}

<div id="header">
  <div id="superheader">
    <div style="margin: auto; width: 630px;">
      <table>
        <tr>
          <td><img src="images/memoji.png" width="100px" height="100px" alt="Icon" </td> <td>
            <p>Title</p>
          </td>
        </tr>
      </table>
    </div>
  </div>
  <a href="page1.html">
    <div class="menuelement">page1</div>
  </a>
  <a href="index.html">
    <div class="menuelement">Startseite</div>
  </a>
  <a href="page2.html">
    <div class="menuelement">page2</div>
  </a>
</div>
<div id="page">
  <h1>First Headline</h1>
  <h2>Second Headline</h2>
  <p>Some text.</p>
</div>

You can use a css rule called z-index. CSS-Tricks writes:

The z-index property in CSS controls the vertical stacking order of elements that overlap. As in, which one appears as if it is physically closer to you. z-index only affects elements that have a position value other than static (the default). So elements with a higher z-index value appear closer to the viewer.

How to get Box-Shadow to render above another element?

3 Answers3