如何使一個絕對定位的元素坐在滾動父級之外，但仍然滾動它？

我有一個小預覽圖像的滾動div，用戶應該可以將其懸停並查看全尺寸圖像。我已經通過在較大的圖像上使用position: absolute;來實現此目的。如何使一個絕對定位的元素坐在滾動父級之外，但仍然滾動它？

這適用於預覽的第一行，但當我向下滾動查看第二行時，全尺寸圖像出現在頁面的更下方 - 預覽之前我滾動到的位置。

但是，如果我將父級設置爲position: relative;，圖像只在滾動div內部可見 - 所以用戶一次只能看到每個圖像的一部分，並且必須滾動以查看整個事物。

HTML：

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

但隨着多preview的div的container 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 - 使用這種方法沒有設置container div的相對位置在Firefox中完美工作;它只是一個讓這個工作跨瀏覽器的例子

來源

2016-07-13 Emma N

不知道的「但也有它們移動時，容器DIV滾動」的一部分... – ecchymose

有趣。它的工作原理就像你想在Firefox中那樣。 –

我甚至沒有注意到在Firefox中工作 - 這是絕對理想的。有沒有什麼辦法讓它跨瀏覽器一致，你知道嗎？ –

沒有相對位置，定義top的big所以它會相對於根。如果您沒有定義top，則默認情況下它將相對於父級。當您滾動時，Chrome瀏覽器似乎沒有進行更新。很好找！

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

來源

2016-07-14 01:50:18

好的。我沒有想到把'container'放在一個相對定位的div中，溢出可見... –

你先生是個天才。謝謝！ –

如何使一個絕對定位的元素坐在滾動父級之外，但仍然滾動它？

回答

相關問題