Browsers scrollbar is under my fixed div

Question

i have a fixed header with 100% width.

#header {
background: #2e2e2e;
width: 100%;
z-index: 999;
position: fixed;
}

browsers scrollbar is u

Answer 1

Set a z-index on the container that is the parent for your header and your content.

Answer 2

remove height:100% in html tag

Answer 3

Had same problem in react app.

Moved overflow-y: scroll style from #root to body selector. It solved issue for me.

Answer 4

its because the overflow-x: hidden; in base.css line number 9

body {
    color: #444444;
    font: 13px/20px Arial,Helvetica,sans-serif;
    overflow-x: hidden; // remove this 
}

Answer 5

put margin-right: 0px; on topNavBar works for me

Answer 6

The issue isn't with overflow-x on the body tag. It's because of overflow-x andoverflow-y on the html tag. Once I removed this from the HTML tag, I could put whatever overflow I wanted on my body.

This happens when:

• overflow-x is set to either auto, hidden, overflow, or scroll
• overflow-y is set to either auto, hidden, -webkit-paged-x, or -webkit-paged-y

It doesn't have to be an explicit call to overflow-x or overflow-y, as overflow sets both of them.

I'm on Chrome 67 using Windows 10.