CODEWITHSUNDEEP
css
Mihai Viteazu
Mihai Viteazu

Reputation: 1661

Div Position Fixed

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/

Upvotes: 3

Views: 106

Answers (2)

Ajis
Ajis

Reputation: 1

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

Upvotes: 0

claustrofob
claustrofob

Reputation: 4984

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/

Upvotes: 2

Related Questions