Geek Answers Handbook

Fixed div overlays scrollbar

I have a problem with a fixed div placed in another div using a scrollbar. It overlaps the scroll bar. this happens under safari, namely 11. When I set the z-index lower than divs with a scrollbar than the fixed div is under it, and this leads to loss of interaction (you cannot click links, etc.). I also tried to make a fake fixed position, and with javaScript set “left” to the “scrollLeft” div using the scroll bar, but I can't use this solution because it gives strange effects in Safari and IE10.

Here is the 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 a link to jsFiddle .

Please help me ive tried to find a solution within 3 days

Thank you in advance

+6
source share
3 answers

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>
+1
source

It's just because of your line

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

Remove the overflow from your style and it will work

It should look like

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

Demo

[Update]

Please check out the new demo.

0
source

This is the correct behavior. This also happens in chrome.

Why?

position:fixed should only apply to the viewport. When you install it on an element, this element is inferred from the stream of any parent and overlaps according to the z-index.

This must be considered in each case for proper behavior, in my opinion.

Also, maybe this is suitable for 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 into another that has display:inline-block to increase the size of the content and max-height so that it doesn't move the fixed size.

If you need it to contain another div, you can imitate this. You can set a fixed position when the fixed div should be visible and change the absolute position when the bottom of the fixed div hits the top of the scroll bar.

Edit:

You can set the height of the elements with top and bottom so that you can possibly do something like this and calculate the bottom with javascript. bottom will become the scrollbar width + padding.

Another way would be to calculate the height of the fixed div to calculate as follows:

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

You can calculate the height of the scroll bar (there are other answers on it), and the above code is a pseudo code, so don't expect it to work as it is.

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

You need to make your own scroll function (or use a plugin, there are quite a lot) and set a higher z-index on the user scroll bar than the fixed div , and also t20> on the user scroll bar when the scrollTop containing div value is equal to its height - custom scrollbar height.

0
source

More articles:


All Articles