如何使绝对定位的元素位于滚动父元素之外但仍与其一起滚动？

Question

我有一个滚动的 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;
}

我这里有一个 fiddle，使用彩色 divs 而不是图像来表示 .big 和 .small : https://jsfiddle.net/jsd8t3gr/3/

我是否可以让 .big 图像像第一个 fiddle 示例中那样漂浮在 .container div 之外（没有相对定位），但是也让它们在容器 div 滚动时移动，就像它们在第二个 fiddle 示例中所做的那样（相对定位在 .container div 上）？

到目前为止，我发现的所有内容都与阻止图像溢出父对象有关，我还没有发现任何关于故意让这种情况发生的信息。

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

Answer 1

没有相对位置，定义 big 的 top 所以它将相对于根。如果不定义top，默认是相对于parent的。当您滚动时，Chrome 似乎没有更新。不错的发现！

工作 fiddle - https://jsfiddle.net/jsd8t3gr/6/

如何使绝对定位的元素位于滚动父元素之外但仍与其一起滚动？

How to make an absolutely positioned element sit outside the scrolling parent but still scroll with it?

html

css

scroll

absolute