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

标签 javascript jquery html css

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

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

JS Fiddle

最佳答案

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

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

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

编辑:

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

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

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

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

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

关于javascript - 使用相对和绝对位置固定滚动上重叠元素的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25238409/

相关文章:

php - 使用循环从 POST 设置变量和字符串

javascript - 如何在 curl php 中发送推送通知时获取注册 ID

javascript - 使用选项卡时错误地应用了 Bootstrap 轮播事件类

javascript - 如何仅使两个重叠图像的重叠部分透明?

javascript - 从 Firebase 数据库中检索数据

javascript - 打印分层的 html5 Canvas

javascript - XMLHttpRequest onprogress 不触发异步 = false

javascript - 编辑php内循环的特定记录

javascript - (jQuery) 在 cookie 中单击时保存复选框状态

jquery - 使用按钮更改 div 内容