title: Fix position: absolute element in a overflow: scroll element when scrolling
body: <p>I want to accomplish a preview of an image gallery that is wider than the screen, using <code>overflow: scroll</code> (or auto).
  To the right, a shadow that overlaps the last visible image should indicate that more images are visible to the right.</p>
  
  <p>Here is a Fiddle: <a href="http://jsfiddle.net/SBdLg/">http://jsfiddle.net/SBdLg/</a></p>
  
  <p>First, I thought: Easy, give that image gallery a <code>box-shadow: inset</code>. But that will be shown behind the images.
  Now, with an overlapping <code>div</code> that has <code>position: absolute</code>, I reach the desired effect BUT the <code>box-shadow</code> also moves when scrolling to the right.</p>
  
  <p>IMHO, this problem would also occur when using an image containing the shadow instead of the <code>div</code> on top.</p>
  
  <p>Is the desired effect possible by CSS at all?</p>