fixed div重叠滚动条

Question

我有固定div的问题放在其他div与滚动条.它重叠滚动条.它发生在safari下,即11.当我将z-index设置为低于带有滚动条的div而不是固定div在它之下并且它失去了交互(你不能点击链接等).我也尝试将假的固定位置设置为绝对并使用javaScript将"left"设置为"scrollLeft"div并使用滚动条但我无法使用此解决方案,因为它在Safari和IE10下会产生奇怪的效果.

这是代码:

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
}

并链接到jsFiddle.

请帮助我,我试图在3天内找到解决方案

提前致谢

Answer 1

只因为你的这一行

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

删除你的样式中的溢出，它就会起作用

它应该看起来像

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

演示

[更新]

请检查新的演示