박스 섀도우가 작동하지 않는 이유는 무엇입니까?

학교용 웹 사이트를 작성해야하며 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

박스 섀도우가 작동하지 않는 이유는 무엇입니까?

답변

관련 문제