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就在那里。但是使用position: absolute已使#content堆叠高于#header。

如果您想使用position，可以添加z-index以确保标头堆栈位于顶部。

Information about z-index

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

尝试添加z-index：1;到你的#header css：）

为什么盒子阴影不起作用？

2 个答案: