2012-12-20 13 views
6

Chcę wykonać podgląd galerii obrazów, która jest szersza niż ekran, przy użyciu overflow: scroll (lub auto). Po prawej stronie cień, który pokrywa się z ostatnim widocznym obrazem, powinien oznaczać, że więcej obrazów jest widocznych po prawej stronie.Napraw położenie: bezwzględny element w przepełnieniu: przewiń element podczas przewijania

Oto Fiddle: http://jsfiddle.net/SBdLg/

Najpierw pomyślałem: Łatwy, że dają galeria zdjęć box-shadow: inset. Ale to będzie pokazane za obrazami. Teraz, nakładając się na div, który ma position: absolute, osiągam pożądany efekt, ALE box-shadow również przesuwa się podczas przewijania w prawo.

IMHO, ten problem wystąpiłby również w przypadku użycia obrazu zawierającego cień zamiast div na wierzchu.

Czy pożądany efekt jest możliwy przez CSS?

Odpowiedz

1

Usunięcie position: relative z outer DIV i pozycjonowanie shadow dokładnie tam, gdzie jest to potrzebne (jest to brzydki fragment) pomoże Ci to osiągnąć.

Sprawdź demo:http://jsfiddle.net/SBdLg/11/

+0

Updated demo, aby dodać kolejny zewnętrzny div z position: relative, dzięki czemu można poruszać się bez brudząc galerię ze stanowiskiem cieniu za każdym razem. – techfoobar

+0

Dzięki, usunięcie 'position: relative' i dodanie jeszcze jednego' div' wokół niego pomogło :) –

Powiązane problemy