CODEWITHSUNDEEP
htmlcss
robt
robt

Reputation: 67

HTML <div> Ordering

I have two divs in my html page and I want them to appear one after the other. Here is the structure of my html page:

<html>
<body>
<div id="navigationBar"></div>
<div id="afterNav"></div>
</body>
</html>

The first div is a navigation bar, so I set its position to fixed. I am expecting the second div to appear below navigation bar, but it appears the above the navigation bar when the page is loaded. The afterNav div starts at the top left corner of the body/html. I tried playing around with the position property, but was not very successful. How do I get the second div appear after the first? Below is my css:

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

Upvotes: 1

Views: 74

Answers (2)

subir biswas
subir biswas

Reputation: 396

If you set the first div (navigationBar) to fixed then you need to make padding top to set the outer div position.

If your navigation height is 70px then you need to set outer div padding-top 70px.

#navigationBar{
    display:block;
    position:fixed;
    background-color: black;
    width:100%; 
    height:70px;
    z-index:0; 
}
#after-nav{
   position:relative;
   z-index:-1;
   padding-top: 70px;
}

you can use margin-top also.

Upvotes: 1

razemauze
razemauze

Reputation: 2676

You need to move it below the fixed-navigation:

#navigationBar{
    z-index:1;
}
#after-nav{
    margin-top:70px
    z-index:0;
}

When you have a position:fixed; element, that element will be on top of anything below it, with a lower z-index.

I would also change z-indexes so you don't have a -1.

Upvotes: 0

Related Questions