Menu
I have to write a website for school and I want to use box-shadow in CSS but it doesn't work. There is not a shadow. I want to have the shadow under the header div box
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%;
}
What can I do to make it work?
764
The box-shadow is there. But using position: absolute has made #content stack above the #header.
If you want to use position, you can add z-index to ensure the header stacks on top.
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
