为什么 box-shadow 不起作用？

Question

我必须为学校写一个网站，我想在 CSS 中使用 box-shadow 但它不起作用。没有影子。我想在标题 div 框下有阴影

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%;
}

我该怎么做才能让它发挥作用？

Answer 1

在box-shadow那里。但是 usingposition: absolute已经使#content堆栈高于#header.

如果您想使用position，您可以添加z-index以确保标题堆叠在顶部。

关于 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>