I am facing an issue with my website layout. I have set an image as the background and a navigation bar that displays over the image. However, when I add a p tag, it also displays over the image instead of below it. I have used position absolute to keep the navigation bar at the top of the page, but the p tag is not behaving as expected.
I have tried removing the position style, but it ends up moving the navigation bar as well.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Sabah Khan</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="background">
<img src="images/bg.jpeg">
</div>
<nav class="navbar navbar-default">
<div class ="container-fluid">
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#expereince">Experience</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</nav>
<div id="skills" style="overflow:hidden;">
<p>some information</p>
</div>
</body>
</html>
CSS
html{
height: 100%;
}
#background img{
position: absolute;
width: 100%;
opacity: 0.6;
}
.nav{
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.nav li{
padding: 30px 15px;
margin-top: 20px;
}
.nav a{
color: rgb(66,69,86);
}
.navbar-default{
background:transparent;
background-image:none;
border-color:transparent;
box-shadow:none;
}