CSS Scrolling Position

Hello Senior brothers, I am new to web designing. In the below code when i scroll down the yellow color container is working fine(ie.moving under the nav bar). but the red container is scrolling above the nav bar. can someone help.

enter image description here

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 {
    /* position: relative; */
    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;
    /* top: 104px; */
    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 we scroll, both the yellow and red bordered containers needed to be under the fixed nav bar. But the red bordered container is scrolling above the nav bar when scrolled.

Solution

Just add z-index: 1; to .nav (or a higher value if you have other elements that require this):

* {
  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;
  z-index: 1;
}

.nav ul {
  /* position: relative; */
  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;
  /* top: 104px; */
  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;
}

<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>