Hello seasoned developers, I'm diving into the world of web design. I have a question about the code below. The yellow container scrolls under the nav bar as expected, but the red container scrolls above it. Can anyone provide some guidance?
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia&effect=fire|neon|3d|fire-animation|shadow-multiple|3d-float">
</head>
<body>
<div class="h">
<div class="nav">
<img src="logo.png" alt="">
<h1 class="title font-effect-shadow-multiple">CSS Page</h1>
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
<br>
<div class="header1">
<img src="black-g51b181fe3_1920.jpg" alt="">
<div class="side"></div>
</div>
</div>
</body>
</html>
style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Sofia;
}
.h {
position: relative;
}
.nav {
width: 100%;
position: fixed;
display: flex;
background-color: aquamarine;
height: 100px;
box-shadow: 10px 10px 20px #1e1b249f;
}
.nav ul {
font-size: 29px;
margin-left: 65%;
margin-top: 16px;
float: right;
justify-content: space-between;
}
li {
list-style: none;
padding: 10px;
display: inline-block;
}
.nav ul li a {
text-decoration: none;
color: black;
}
.nav ul li:hover {
text-decoration: underline;
text-decoration-color: chartreuse;
}
.title {
font-size: 33px;
position: absolute;
top: 23px;
left: 43%;
color: black;
}
.header1 {
margin-top: 400px;
top: 50px;
border: 10px solid yellow;
position: static;
}
.header1 img {
width: 100%;
height: 800px;
}
.heading {
bottom: 300px;
left: 40px;
color: antiquewhite;
height: 200px;
width: 300px;
}
.heading h1 {
text-decoration: underline;
text-decoration-color: aquamarine;
}
.side {
position: absolute;
top: 550px;
right: 20px;
border: 20px solid red;
width: 350px;
height: 350px;
}
.side img {
background-size: cover;
}
When scrolling, both the yellow and red bordered containers should remain under the fixed nav bar. However, the red bordered container is scrolling above the nav bar. How can this be fixed?