ボックスシャドウが機能しないのはなぜですか？

私は学校用のウェブサイトを作成する必要があり、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%; 
}

？

出典

2017-12-11 Grevak

box-shadowがあります。しかし、position: absoluteを使用すると、#headerの上に#contentのスタックが作成されました。

positionを使用する場合は、z-indexを追加して、ヘッダースタックが上になるようにすることができます。

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>

出典

2017-12-11 10:17:54 sol

Zインデックスを追加してみてください：1。あなたの#headerのCSSに：

出典

2017-12-11 10:19:17 Xoog

ボックスシャドウが機能しないのはなぜですか？

答えて

関連する問題