CODEWITHSUNDEEP
htmlcssposition
Azizi
Azizi

Reputation: 151

How to set Div to appear behind another div on scroll?

I have a navigation bar under a header div tag and a slideshow div afterwards ... as the code shows

<div class="header">
   <div id="navbar">
       content    
   </div>
</div>

<div class="container">
    <div class="slideshow" id="slideshow">
        slideshow content    
    </div>
</div>

the header and navbar have a fixed position to stay on top of the page when scrolling , the problem is when I scroll my "slideshow" appears on top of the navbar but the rest of the page content does not, how can I fix this ?

CSS styles

.slideshow {
    position: relative;
    margin-bottom: 10px;
    padding: 50px 0 0 0 ;
}

Different CSS sheet for header and navbar

.header {
    background: #2f3036;
    height: 51px;
    position:fixed;
    width: 100%;
}

#ime-nav {
    position: fixed;
    width: 100%;
    z-index: 10000;
    background:#FF9900;     
}

Upvotes: 1

Views: 1644

Answers (1)

Azizi
Azizi

Reputation: 151

apparently I just needed to add a z-index to the header, completely overlooked it 

.header {
    background: #2f3036;
    height: 51px;
    position:fixed;
    width: 100%;
    z-index: 1;
}

Upvotes: 2

Related Questions