固定div与滚动条重叠

我在使用滚动条将固定 div 放置在其他 div 中时遇到问题。它与滚动条重叠。它发生在 safari 和 ie 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 http://jsfiddle.net/jy7ZM/3/.

请帮助我，我已经尝试了 3 天以上的解决方案

提前致谢

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>