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

时间:2014-08-11 08:02:10

标签: javascript jquery html css

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

到目前为止,我创造了以下小提琴:

JS Fiddle

1 个答案:

答案 0 :(得分:0)

我不认为用css可以做到这一点。你要问的是左手桌用它的容器div垂直滚动,但不能水平滚动。

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

你可以把右手表放在带溢出的div里面:滚动,这样只有当你水平滚动时才会移动。当你垂直滚动时,你有两个问题不再排成一线的问题 - 你能不能让它足够高以便全桌显示?这对你有用吗?

修改

在你的小提琴中,你设定了高度:500px; for .container。

如果您不需要,请将其删除,以便设置自己的高度并显示整个表格。然后你只有侧面滚动来处理,这是可行的(例如,只有溢出的右表上放一个包装:滚动)

不,我不使用position:fixed here,设置相对于浏览器窗口的内容,这对用户上下滚动没有好处。

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

非常了解css定位。