Fix position: absolute element in a overflow: scroll element when scrolling

Question

I want to accomplish a preview of an image gallery that is wider than the screen, using overflow: scroll (or auto). To the right, a shadow that overlaps the last visible image should indicate that more images are visible to the right.

Here is a Fiddle: http://jsfiddle.net/SBdLg/

First, I thought: Easy, give that image gallery a box-shadow: inset. But that will be shown behind the images. Now, with an overlapping div that has position: absolute, I reach the desired effect BUT the box-shadow also moves when scrolling to the right.

IMHO, this problem would also occur when using an image containing the shadow instead of the div on top.

Is the desired effect possible by CSS at all?

techfoobar · Accepted Answer · 2012-12-20 18:11:05Z

1

Removing position: relative from the outer DIV and positioning the shadow precisely where you need it (this is the ugly bit) will help you achieve this.

Check the demo: http://jsfiddle.net/SBdLg/11/

answered Dec 20, 2012 at 18:11

techfoobar

66.8k14 gold badges117 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

techfoobar Over a year ago

Updated the demo to add a further outer DIV with position: relative so that you can move the gallery around without messing with the position of the shadow each time.

k_haha Over a year ago

Thanks, removing the position: relative and adding one more div around it helped :)

Collectives™ on Stack Overflow

Fix position: absolute element in a overflow: scroll element when scrolling

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related