位置：绝对和可滚动的 div答案

【问题标题】：position:absolute and scrollable div位置：绝对和可滚动的 div
【发布时间】：2013-11-09 01:55:35
【问题描述】：

我有一个由行组成的可滚动div。每行都有一个不可见的span，当您单击该行时它会变得可见。跨度在打开时（正确地）与行的高度相同。

但是，如果我滚动主容器，由于跨度处于固定位置，它们将不再处于同一行的高度。由于这个问题真的很难解释，here's the JSFiddle I've prepared。尝试在不滚动的情况下单击一行。重新加载页面并再次尝试，但在滚动到 div 到底部之后。

position:absolute 是我唯一能让跨度“弹出”行的方法，但与此同时，这也是相对于行的定位。 position:relative 应该可以工作，但是跨度比行大得多，而后者正在使用 overflow:hidden。

请注意，该示例是使用数据绑定库创建的复杂结构的快速副本：我无法更改此结构，而且 jQuery 甚至不是一个选项。理想情况下，我只需要使用 CSS 来解决这个问题，但我不知道如何：如果我滚动 div，是否有任何替代 position:fixed 的方法？

【问题讨论】：

给出跨度位置：相对；没有选择？它似乎提供了您正在寻找的功能。 jsfiddle.net/MathiasaurusRex/LM32h/6
不幸的是我不能 - 我正在更新问题和小提琴以说明原因。行必须使用 overflow:hidden 以防止内容输出和跨度大于行。顺便说一句，感谢您的帮助！

标签： html css

【解决方案1】：

尝试在点击事件中使用 JS 设置 top。

$('.row').click(function () {
    var pos = $(this).position().top;
    $(this).find('span').css({
        "display": "block",
        "top":pos
    });
});

可能需要从pos 中添加/减去，具体取决于所需的确切位置。

http://jsfiddle.net/daCrosby/LM32h/8/

【讨论】：