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

将Position从fixed更改为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>

Answer 2

这只是因为你的这一行

<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">

Demo

<强> [更新]

请检查新的Demo

Answer 3

这是正确的行为。它也发生在chrome中。

为什么？

position:fixed应仅与视口相关。当您在元素上设置它时，该elemenet将从任何父元素的流中取出并根据z-index重叠。

在我看来，需要逐案处理这种行为。

此外，也许这适合您的用例：

<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>

它将fixed div包含在display:inline-block的另一个中，以放大到内容的大小，并max-height，以便它不会超过固定的大小。

如果你需要另一个div 包含，那么你可以模拟它。当固定div应该可见时，您可以设置固定位置，当fixed div的底部击中滚动条顶部时，可以更改为绝对位置。

编辑：

您可以使用top和bottom设置元素高度，这样您就可以执行类似this的操作，并使用javascript计算bottom。 bottom将成为滚动条高度+填充。

另一种方法是计算要计算的fixed div的高度：

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

可以计算滚动条高度（还有其他答案），上面的代码是伪代码，所以不要让它按原样运行。

如果你需要它一直是100％，还有另一种方式。但是很复杂。

您必须制作自定义滚动条功能（或使用插件，有很多内容），并在自定义滚动条上设置比z-index更高的fixed div当position:fixed的{{1}}等于其高度时，也在自定义滚动条上设置scrollTop - 自定义滚动条高度。

fixed div重叠滚动条

3 个答案:

为什么？

编辑：