How to make an absolutely positioned element sit outside the scrolling parent but still scroll with it?
<p>I have a scrolling div of small preview images which the user should be able to hover over and see a full size image. I've achieved this by using <code>position: absolute;</code> on the larger images.</p>

<p>This works fine for the first line of previews, but when I scroll down to view the second line, the full size image appears further down the page - where the previews had been before I scrolled to them.</p>

<p>However, if I set the parent to be <code>position: relative;</code> the images are only visible inside the scrolling div - so the user can only see a section of each image at a time and must scroll to see the whole thing.</p>

<p>HTML:</p>

<pre><code>&lt;div class="container"&gt;
    &lt;div class="preview"&gt;
        &lt;img class="big"&gt;
        &lt;img class="small"&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>But with multiple <code>preview</code> divs inside the <code>container</code> div.</p>

<p>CSS:</p>

<pre><code>.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;
}
</code></pre>

<p>I've got a fiddle here, using coloured divs instead of images to represent <code>.big</code> and <code>.small</code> : <a href="https://jsfiddle.net/jsd8t3gr/3/" rel="nofollow">https://jsfiddle.net/jsd8t3gr/3/</a></p>

<p>Is there anyway I can keep the <code>.big</code> images floating outside the <code>.container</code> div like it does in the first fiddle example (no relative positioning), but also have them move when the container div scrolls, like they do in the second fiddle example (with relative positioning on the <code>.container</code> div)? </p>

<p>Everything I've found so far is related to stopping the images from overflowing the parent, I've not found anything about making that happen on purpose.</p>

<p><strong>EDIT</strong> - Using this method without setting container div to have relative position works perfectly in Firefox; it's just a case of getting this to work cross-browser</p>