絶対配置された要素をスクロールする親の外側に置くが、それでもスクロールする方法を教えてください。

Question

私は小さなプレビュー画像のスクロールdivを持っています。このプレビュー画像の上にマウスを置いてフルサイズの画像を見ることができます。私は大きな画像にposition: absolute;を使用してこれを達成しました。

これはプレビューの最初の行でうまく動作しますが、2行目を表示するまでスクロールすると、フルサイズの画像がページの下側に表示されます。

ただし、親を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; 
} 

私は.bigと.smallを表現するために着色されたdiv要素の代わりに画像を使用して、ここでフィドルを持っている：https://jsfiddle.net/jsd8t3gr/3/

がありますとにかく、私は外に浮動.big画像を維持することができます.container div最初のバイブルの例（相対的な位置付けなし）のように、コンテナのdivがスクロールしたときに移動するようにします（第2のバイブルの例（.container divの相対的な位置付け）のように）。

私が今までに見つけたことは、イメージが親を溢れさせるのを止めることに関連しています。

EDIT - コンテナdivを相対位置に設定せずにこの方法を使用すると、Firefoxでは完全に機能します。これは、クロスブラウザで動作するようにする場合に過ぎません。

Answer 1

topをbigと定義すると、相対的な位置がないため、ルートとの相対的な関係になります。 topを定義しないと、デフォルトで親に対して相対的になります。スクロールするとChromeで更新されないようですニースを見つける！

の作業フィドル - についてhttps://jsfiddle.net/jsd8t3gr/6/