如何使绝对定位的元素位于滚动父级之外但仍随其滚动？答案

【问题标题】：How to make an absolutely positioned element sit outside the scrolling parent but still scroll with it?如何使绝对定位的元素位于滚动父级之外但仍随其滚动？
【发布时间】：2016-11-16 12:42:53
【问题描述】：

我有一个小预览图像的滚动 div，用户应该能够将鼠标悬停在上面并查看完整尺寸的图像。我通过在较大的图像上使用position: absolute; 实现了这一点。

这对于第一行预览效果很好，但是当我向下滚动查看第二行时，完整尺寸的图像会出现在页面下方 - 在我滚动到预览之前的位置。

但是，如果我将父级设置为 position: relative;，则图像仅在滚动 div 内可见 - 因此用户一次只能看到每个图像的一部分，并且必须滚动才能看到整个内容。

HTML：

<div class="container">
    <div class="preview">
        <img class="big">
        <img class="small">
    </div>
</div>

但container div 中有多个preview div。

CSS：

.container {
    width: 300px;
    height: 120px;
    overflow: auto;
 }
.preview {
    display: inline-block;
}
.small {
    width: 100px;
}
.big {
    display: none;
    position: absolute;
    z-index: 2;
}
.preview:hover .big {
    display: block;
}

我有一个小技巧，使用彩色 div 代替图像来表示 .big 和 .small ：https://jsfiddle.net/jsd8t3gr/3/

无论如何我可以让.big 图像漂浮在.container div 之外，就像在第一个小提琴示例中那样（没有相对定位），但也让它们在容器 div 滚动时移动，就像它们在第二个小提琴示例（在.container div 上具有相对定位）？

到目前为止，我发现的一切都与阻止图像溢出父级有关，我还没有发现任何关于故意使这种情况发生的事情。

EDIT - 在 Firefox 中使用此方法而不将容器 div 设置为具有相对位置可以完美运行；这只是让它跨浏览器工作的一个例子

【问题讨论】：

不确定“但也让它们在容器 div 滚动时移动”部分...
有趣。不过，它就像你在 Firefox 中想要的那样工作。
我什至没有注意到它在 Firefox 中有效——这绝对是理想的。有什么办法让它跨浏览器一致，你知道吗？
@EmmaN 我不知道。如果我可以提供更多信息，我会提供的。对不起。
@MrLister - 我尝试过搜索，但绝对位置被认为在我找到的所有内容中都非常一致。不过感谢您指出 - 我会继续寻找 Firefox 正在做什么，而 chrome 没有。

标签： html css scroll absolute

【解决方案1】：

没有相对位置，定义big 的top，使其相对于根。如果您不定义顶部，则默认情况下它将相对于父级。滚动时似乎不会在 Chrome 上更新。很好的发现！

工作小提琴 - https://jsfiddle.net/jsd8t3gr/6/

【讨论】：

好一个。我没有想到将container 放在一个相对定位的 div 中，溢出可见...
您先生是个天才。谢谢！