固定div重叠滚动条 [英] fixed div overlaps scrollbar

问题描述

我有固定div放在其他div与滚动条的问题。它与滚动条重叠。它发生在safari下，即11。当我设置z-索引低于divs与滚动条比固定div在它下面，它失去了相互作用（你不能点击链接等）。我也试图让假的固定位置设置为绝对并与javaScript设置左到滚动条scrollLeftdiv但我不能使用此解决方案，因为它在Safari和IE10下提供奇怪的效果。

以下是代码：

HTML

 < div id =cont> 
< div class =spacer s2>< / div> 
< div id =targetclass =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; 
位置：固定; 
 overflow：hidden; 
背景颜色：红色; 
 z-index：0 
} 
 .spacer {
 width：3000px; 
 height：1px; 
 z-index：-1 
} 
  

并链接至 jsFiddle 。

请帮助我试图找到解决方案超过3天

提前致谢

解决方案

更改 $ 固定至绝对

 < div id =targetclass =box2 bluestyle =width：200px; height：800px; position：absolute; overflow：hidden; background- color：red; z-index：0> 
< a href =dfsdfsd> dsfsdf< / a> 
< / div> 
  




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

解决方案

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>

这篇关于固定div重叠滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！