Div Position Fixed

Question

I have a problem with two divs that have position: fixed.

If you look at the header, the scrollbar is in the back and the header is on top of the scrollbar. How can I fix this?

HTML:

<div class="BG1"> <div class="Data"></div> </div> <div class="BG2"> <div id="Header"> <div class="Header_Data"></div> </div> <br />a<br /><br />a<br /><br /> </div>

Code: http://jsfiddle.net/Z6Pwg/

You can fix it by creating a layout without making everything on the page position: fixed. The browser's scrollbar cannot be overlapped, unlike a div's scrollbar. — James Montagne
– James Montagne, Commented Jun 29, 2013 at 18:34

claustrofob · Accepted Answer · 2013-06-29 18:45:20Z

2

I simplified your example: http://jsfiddle.net/uVjft/

So actually you have on position: fixed block inside another. And the scrollbar corresponds to BG2 block NOT the window scrollbar which actually cannot be overlapped.

To fix this try to remove position: fixedfrom BG2 div: http://jsfiddle.net/Z6Pwg/1/

edited Jun 29, 2013 at 18:45

answered Jun 29, 2013 at 18:35

claustrofob

5,0042 gold badges21 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Mihai Viteazu Over a year ago

yes i see that ... but how i can do something that way or some fix ... right now the only fix what i find its make ".BG2 #Header" to be width: 99% so he have the space for scrollbar ... the problem its if you want to add box-shadow will be a problem ...

claustrofob Over a year ago

does removing position: fixed from the div not solve the problem?

Mihai Viteazu Over a year ago

i find one way how to fix the problem ... how i say up .. to make the width = 99% becouse scrollbar its 1%, how much i see its working ... ( sorry for my bad english )

claustrofob Over a year ago

Just resize the window this the result you will notice that scrollbar is not always 1%. And in different browsers you will see different result. Each browser has different scrollbar width. You have chosen the wrong way. Does my solution not work for you?

claustrofob Over a year ago

did you try this link jsfiddle.net/Z6Pwg/1 ? it works in chrome and firefox.

|

Ajis · Accepted Answer · 2014-02-03 09:24:06Z

just include the code

 .BG2 #Header .Header_Data { width: 100%; height: 120px; overflow: hidden; background-color:#eee; }

in your css it will fix your issue, and if u want a fixed header don't use transparent background

Thanks

Collectives™ on Stack Overflow

Div Position Fixed

2 Answers 2

7 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Related