CODEWITHSUNDEEP
scrollcss-positioncss
k_haha
k_haha

Reputation: 63

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

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?

Upvotes: 6

Views: 4870

Answers (1)

techfoobar
techfoobar

Reputation: 66663

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/

Upvotes: 1

Related Questions