I need help positioning container 2 statically below container 1. The navigation bar is fixed, so it will be outside the flow of the page while container 1 is relative and will appear on top as if the navigation doesn't exist in the flow. However, when I added container 2, it ended up being positioned at the top instead of under the entire container 1 div (below the image). Could someone please assist? Thank you
https://i.sstatic.net/VXdcj.jpg
body{
height: 100%;
width: 100%;
margin:0;
}
/* I WOULD LIKE TO FIX THE NAVIGATION BAR SO THAT IT REMAINS IN PLACE AS I SCROLL DOWN */
.navigation{
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 50px;
background-color: tomato;
opacity: 0.6;
}
/* CONTAINER 1 WILL BE POSITIONED AT THE TOP OF VIEWPORT DUE TO FIXED NAVIGATION DIV */
.container1{
position: relative;
height: 100%;
width: 100%;
}
/* CONTAINER 1 WILL INCLUDE AN IMAGE THAT COVERS THE ENTIRE SCREEN AS BACKGROUND */
.container1 img {
position: absolute;
width: 1349px;
height: 750px;
z-index: -1;
}
/* SOME CONTENT ON THE IMAGE ELEMENT */
.container1-desc{
position: absolute;
top: 200px;
left: 120px;
}
.container1-desc h1{
margin: 0;
color: #FFF;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="main">
<nav class="navigation"></nav>
<div class="container1">
<img src="./pizza-3.jpg"/>
<div class="container1-desc"><h1>THE BEST PIZZA</h1></div>
</div>
<div class="container2">
<h1>hello</h1>
</div>
</div>
</body>
</html>