javascript - 使用相对和绝对位置固定滚动上重叠元素的位置

Question

我有一个固定宽度和高度的 div，overflow: scroll 和 position: relative。在里面我有两个表元素，第一个包含 10 列，第二个是第一个表的副本并且只有前 3 列。我将 position:absolute 赋给了第二个表，假设两个表都保存了样式，那么第二个表将与第一个表重叠。我的要求是当 div 水平滚动时，我希望固定与第一个表格重叠的第二个表格，即它不应在水平滚动时移动，而在垂直滚动时第二个表格的内容应正确滚动。

我已经用我目前所拥有的创建了以下 fiddle :

JS Fiddle

Answer 1

我认为这对于 css 是不可能的。您要求的是左侧表格与其容器 div 一起垂直滚动，而不是水平滚动。

我会在这里重新考虑您的要求。

您可以将右边的表格放在带有 overflow:scroll 的 div 中，这样当您水平滚动时只有那个表格移动。当你垂直滚动时，你会遇到两个不再排成一行的问题——你能把它调得足够高以便显示整个表格吗？这对你有用吗？

编辑:

然后在你的 js-fiddle 中设置了 height:500px;对于.container.

如果您不需要它，则将其删除，这样它们就会设置自己的高度并显示整个表格。然后你只需要处理横向滚动，这是可行的(例如，将包装器放在右手边的 table 上，只有溢出:滚动)

不，我不会在这里使用 position:fixed，它设置了一些相对于浏览器窗口的东西，这对用户上下滚动没有好处。

看看这个:http://www.barelyfitz.com/screencast/html-training/css/positioning/

这对您了解 CSS 定位非常有用。