javascript - fixed div overlaps scrollbar - Stack Overflow

admin管理员组

文章数量:1287535

I have problem with fixed div placed in other div with scrollbar. It overlaps scrollbar. it happend under safari and ie 11. When i set z- index to lower than divs with scrollbar than fixed div is under it and it losses interaction (you cant click links etc).Also i tried to make fake fixed position setting it to absolute and with javaScript set "left" to "scrollLeft" div with scrollbar but i cant use this solution because it gives strange effects under Safari and IE10.

Here is code:

HTML

<div id="cont">
  <div class="spacer s2"></div>
  <div id="target" class="box2 blue">
     <a href="dfsdfsd">dsfsdf</a>
  </div>
</div>

CSS

#cont {
    width:100%;
    height:800px;
    overflow:hidden;
    overflow-x: scroll;
    z-index:0
}
#target {
    width:200px;
    height:800px;
    position:fixed;
    overflow:hidden;
    background-color:red;
    z-index:0
}
.spacer {
    width:3000px;
    height:1px;
    z-index:-1
}

And link to jsFiddle.

Please help me ive tried to find solution over 3 days

Thanks in advance

I have problem with fixed div placed in other div with scrollbar. It overlaps scrollbar. it happend under safari and ie 11. When i set z- index to lower than divs with scrollbar than fixed div is under it and it losses interaction (you cant click links etc).Also i tried to make fake fixed position setting it to absolute and with javaScript set "left" to "scrollLeft" div with scrollbar but i cant use this solution because it gives strange effects under Safari and IE10.

Here is code:

HTML

<div id="cont">
  <div class="spacer s2"></div>
  <div id="target" class="box2 blue">
     <a href="dfsdfsd">dsfsdf</a>
  </div>
</div>

CSS

#cont {
    width:100%;
    height:800px;
    overflow:hidden;
    overflow-x: scroll;
    z-index:0
}
#target {
    width:200px;
    height:800px;
    position:fixed;
    overflow:hidden;
    background-color:red;
    z-index:0
}
.spacer {
    width:3000px;
    height:1px;
    z-index:-1
}

And link to jsFiddle.

Please help me ive tried to find solution over 3 days

Thanks in advance

• javascript
• css
• html

Share Improve this question Follow edited Apr 14, 2014 at 10:57 4dgaurav 11.5k44 gold badges3434 silver badges5959 bronze badges asked Apr 14, 2014 at 10:38 chytrychytry 9111 gold badge11 silver badge44 bronze badges 3

• I'd say this is expected behaviour. If you take something out of the documents flow by making it fixed but give it the same height as the parent which has a scrollbar, it will overlap. What are you trying to achieve here? There are probably better ways of doing it... – Reinder Wit Commented Apr 14, 2014 at 11:06
• i just need to have div that covers width 100% height 100% with scrollbar - cont inside it i need another div that covers width 100% height 100% - target and it bahavies like fixed - it stays on its position during scrolling and another div named spacer that have width 3000px just to activate scrolling. i hope this helps to better understane this case – chytry Commented Apr 14, 2014 at 14:45
• If someone (like me) stumbles on this old post this looking for a solution, I've solved a similar problem here – Michel Commented Feb 10, 2016 at 11:48

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

change Position from fixed to absolute

<div id="target" class="box2 blue" style="width: 200px; height: 800px; position: absolute; overflow: hidden; background-color: red; z-index:0">
    <a href="dfsdfsd">dsfsdf</a>
</div>

Its just because of your this line

<div id="cont"  style="width:100%;height:800px;overflow:hidden;overflow-x: scroll;z-index:0">

Remove overflow from your style and it will work

It should be looks like

<div id="cont"  style="width:100%;height:800px;z-index:0">

Demo

[Updated]

Please check new Demo

This is the right behavior. It happens in chrome too.

Why ?

position:fixed should be relative only to the viewport. When you set it on an element, that elemenet is taken out of the flow of any parent and overlapped according to the z-index.

This needs to be treated case by case for correct behavior in my opinion.

Also, maybe this fits your use-case:

<div style="display:inline-block;position:fixed; max-height:100px;overflow:hidden;">
    <div id="target" class="box2 blue" style="width:200px;height:800px;overflow:hidden;background-color:red;z-index:0;">
        <a href="dfsdfsd">dsfsdf</a>
    </div>
</div>

It wraps the fixed div in another one that has display:inline-block to enlarge to the size of the content and a max-height so it will not go over a fixed size.

If you need it to be contained by another div than you can simulate this. You can set position fixed when the fixed div should be visible and change to position absolute when the bottom of the fixed div hits the top of the scrollbar.

Edit:

You can set an elements height using top and bottom so you could probably do something like this and you calculate the bottom with javascript. The bottom would bee the scrollbar height + padding.

---

Another way would be to calculate the height of the fixed div to be calculated like this:

var sizeUntillBottomScrollbar = containingDivHeight - containingDivScrollTop;
if(sizeUntillBottomScrollbar  <= scrollBarHeight)
    fixedDivHeight = windowHeight - scrollBarHeight - sizeUntillBottomScrollbar;
else
    fixedDivHeight = windowHeight;

The scrollbar height can be calculated (there are other answers on that) and the above code is pseudocode so don't expect it to run as-is.

---

There is also another way if you need it to be 100% all the time. But is quite plicated.

You have to make your custom scrollbar functionality (or use a plugin, there are quite a lot) and set on the custom scrollbar a higher z-index than the fixed div and also set position:fixed on the custom scrollbar too when the scrollTop of the containing div is equal to its height - the custom scrollbar height.

本文标签： javascriptfixed div overlaps scrollbarStack Overflow