Why does box-shadow not work?

I have to write a website for school and I want to use box-shadow in CSS but it doesn't work. There is not a shadow. I want to have the shadow under the header div box

html

<html>
<head>
    <title>DABA - Videoverleih</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
    <div id="header">
        <h1>Videoverleih</h1>
    </div>

    <div id="content">

    </div>
</body>

CSS

#header {
    box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.5);
    background-color: #AA0000;
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
    height: 12%;
}

#header h1 {
    color: #FFFFFF;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
}

#content {
    background-color: #FFFFFF;
    position: absolute;
    left: 0;
    top: 12%;
    width: 100%;
    height: 88%;
}

What can I do to make it work?

Solution

The box-shadow is there. But using position: absolute has made #content stack above the #header.

If you want to use position, you can add z-index to ensure the header stacks on top.

Information about z-index

#header {
  box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.5);
  background-color: #AA0000;
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 12%;
  z-index: 1;
}

#header h1 {
  color: #FFFFFF;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
}

#content {
  background-color: #FFFFFF;
  position: absolute;
  left: 0;
  top: 12%;
  width: 100%;
  height: 88%;
}

<div id="header">
  <h1>Videoverleih</h1>
</div>

<div id="content">

</div>