为什么 box-shadow 不起作用？

Question

我必须为学校写一个网站，我想在 CSS 中使用 box-shadow，但它不起作用。没有影子。我想在 header 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 在那里。但是使用 position: absolute 使 #content 堆叠在 #header 之上。

如果你想使用position，你可以添加z-index以确保header堆叠在最上面。

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>

Answer 2

尝试添加 z-index: 1;到你的#header css :)

为什么 box-shadow 不起作用？

Why does box-shadow not work?

html

css

box-shadow