Почему box-shadow не работает?

Мне нужно написать веб-сайт для школы, и я хочу использовать box-shadow в CSS, но это не работает. Нет тени. Я хочу иметь тень под полем заголовка 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%;
}

Что я могу сделать, чтобы заставить его работать?


html css box-shadow
person Grevak    schedule 11.12.2017    source источник

Ответы (2)


arrow_upward
8
arrow_downward

box-shadow есть. Но использование position: 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>

person sol    schedule 11.12.2017

arrow_upward
1
arrow_downward

Попробуйте добавить z-index: 1; в ваш #header css :)

person Xoog    schedule 11.12.2017