Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Scroll

Html Fixed Div Overlapped By Other Div

Post a Comment
I am designing a website, inside which I want to have a toolbar at the top, no matter how the scroll acts, the toolbar div will always be at the top. This is what I have so far: ht

Solution 1: 

   .stuckpart{
      position:fixed;
      padding-bottom: 200px;
      z-index:100
    }

z-index will solve your issue of overlapping.


Solution 2: 

#nav_bar {
    position: fixed;
    background-color:blue;
    height:50px;
    width:100%
    }
#content {
    background-color:lightgreen;
    overflow-y:auto;
    height:200px;
    position:relative;
    width:100%;
    top:50px;
}

http://jsfiddle.net/oa7mfcmb/6/


Solution 3:

This will move your nav bar to the top of the page and keep it there while you scroll through the page.

<body>
    <div id='nav_bar'>
    </div>
</body>


#nav_bar {
   position: fixed;
   top: 0px;
   //the rest of your nav bar style
}

Solution 4:

HTML:

<div class="menu"></div>

CSS:

.menu {
    background-color: #000000;
    width: 500px;
    height: 50px;
    position: fixed;
    margin-top: 0px;
}

Position fixed is important.


Post a Comment for "Html Fixed Div Overlapped By Other Div"