固定的div重叠了滚动条

Question

我有一个问题，就是固定的div放在带滚动条的其他div中时会重叠在滚动条上面。这发生在Safari和IE 11下。当我将z-index设置为低于带滚动条的div时，固定的div位于其下方，并且失去交互性（无法单击链接等）。我还尝试了创建一个假的固定位置，将其设置为absolute，然后使用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。

请帮帮我，我已经尝试了三天找解决方案。

提前感谢。

- chytry

---

我认为这是预期行为。如果您通过将其设置为固定大小来将某物从文档流中移出，但同时又使其具有与带有滚动条的父元素相同的高度，则会发生重叠。您在这里想要实现什么？可能有更好的方法可以实现... - Reinder Wit

我只需要一个覆盖宽度100％高度100％并带有滚动条的div - cont。在其中，我需要另一个覆盖宽度100％高度100％的div - target，它的行为类似于固定的 - 在滚动期间保持在其位置，并且还需要另一个名为spacer的div，它具有宽度3000px，仅用于激活滚动条。我希望这可以帮助更好地理解这种情况。 - chytry

如果有人（比如我）偶然发现这篇旧帖子并正在寻找解决方案，我已经在这里解决了类似的问题。 - Michel

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>

- Sai Babu

---

它在Chrome、IE 11和Windows 8上的Firefox上无法正常工作，滚动条仍然在红框下面 :( - chytry

奇怪的是它在Mac、Chrome、Safari、Firefox和Opera等每个浏览器上都能工作正常。但在Windows 8上，它却无法在任何浏览器上工作。这里是来自Windows 8上Chrome浏览器的截图链接。 - chytry

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

演示

[已更新]

请查看新的演示

- Just code

---

将滚动条移动到视口（窗口）。他希望滚动条在 div 上。 - Andrei

准确地说，我需要在 div 上有滚动条而不是在视口上。这就是整个问题所在。 - chytry

不幸的是，在Chrome、IE 11、Firefox上，它在Windows 8下不能正常工作，滚动条仍然在红框之下 :( - chytry

将 z-index: 0; 应用于具有溢出的父元素实际上是解决我的问题的关键。 - Matt Jensen

Answer 3

这是正确的行为。在Chrome中也会发生。

为什么？

position:fixed应该只相对于视口进行定位。当你将其设置在一个元素上时，该元素会脱离父元素的流，并根据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，并在fixed div底部击中滚动条顶部时更改为绝对位置。

编辑：

您可以使用top和bottom来设置元素的高度，因此您可能可以做类似于this的事情，并使用JavaScript计算bottom。 bottom将变为滚动条高度+填充。

---

另一种方法是计算固定 div 的高度，可以按照以下方式进行计算：

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

滚动条的高度可以计算出来（有其他答案），上面的代码是伪代码，所以不要指望它能直接运行。

---

如果你需要100%的时间都能使用，还有另一种方法。但是这种方法相当复杂。

你必须创建自己的自定义滚动条功能（或使用插件，有很多），并在自定义滚动条上设置比固定div更高的z-index，并且当包含div的scrollTop等于其高度-自定义滚动条的高度时，也要在自定义滚动条上设置position:fixed。

- Andrei

---

在我的情况下，target 必须是 height 100%。我不能使用另一个 div 来修剪它，以强制它不覆盖滚动条，因为在每个浏览器中，滚动条的行为都不同。在 Mac 上，它们是自动隐藏并覆盖内容，在 Windows 上则不是，并且它们具有不同的高度。 - chytry

请查看更新后的答案。希望它不太困难。 - Andrei