I am currently facing an issue with the placement of two divs on my html page. I have a navigation bar and another content div, but they are not appearing in the right order. This is how my html structure looks:
<html>
<body>
<div id="navigationBar"></div>
<div id="afterNav"></div>
</body>
</html>
The navigation bar is set to position fixed, but the content div afterNav is not appearing below it as expected. It seems to be overlapping with the navigation bar instead. I have tried adjusting the CSS properties, but without much success. How can I ensure that the second div appears after the first? Here is my current CSS code:
html, body{
height:100%;
width:100%;
margin:0px;
margin:0;
font-family: "Helvetica" , "Arial", sans-serif;
font-size: 1rem;
color: #212529;
}
#navigationBar{
display:block;
position:fixed;
background-color: black;
width:100%;
height:70px;
z-index:0;
}
#afterNav{
position:relative;
z-index:-1;
}