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 under my fixed div. How to fix that?

Answer 1

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 2

This can be solved by adding overflow of body

from

overflow:auto;

to

overflow:auto;
overflow:initial;

This is your issue

If your scroll is set on body, if its structured as body > wrapper > header (with fixed position), content so on

below is your solution

solution for issue

note: this will work only on body but not on div container with scroll. you can also work with z-index to get it to work, but you will be specifying z-index to stack other elements in order to get it right.

Hope this helps..:)

Answer 3

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.