Temat: CSS position(s)

Witam,

Chciałbym zrobić tak, żeby div przesuwał się razem ze scrollowaniem strony (można ustawić dla niego position fixed), ale dodatkowo chciałbym, żeby nie pojawiał się powyżej pewnej linii. Problem polega na tym, że ta linia jest poniżej podstawowego widoku strony.

Żeby zobrazować o co mi chodzi przygotowałem dokument: http://morph.home.pl/test/float.html
Chodzi o to, by FORMULARZ był pod NEWSLETTER, ale też przesuwał się wraz z dalszym przewijaniem strony w dół (żeby wciąż był widoczny).

Próbowałem takie rozwiązanie, jednak nie działa:
#newsletter_form { width: 200px; height: 150px; background: #0f0; position: absolute }
#order_form { width: 200px; height: 100%; background: #f00; position: relative; top: 200px }
#order { height: 100px; width: 200px; background: #f00; position: fixed; bottom: 50px }

Da się w ogóle coś takiego zrobić w CSS? Jakieś pomysły?

Temat: CSS position(s)

na pomoc przyjdzie Ci java script

Temat: CSS position(s)

Z ciekawości przyjrzałem się temu bliżej.
Tak jak Michał nie widzę tutaj rozwiązania przy użyciu samych CSS. Choć trop z position fixed jest dobry.

Posypałem Twój kod szczyptą javascriptu i wyszło coś takiego:
http://mcr.augustow.org/MOJE/float.html

Aby zepchnąć element (tutaj div) na dół ekranu należy ustawić dla niego position: fixed oraz bottom: 0 px. Problem w tym, dany element będzie przesłaniał inne jeśli wysokość okna przeglądarki będzie mniejsza niż startowa pozycja Y naszego elementu. Do tego dochodzą jeszcze problemy ze scrollowaniem. Należy włączyć position: fixed tylko jeśli zostaną spełnione pewne warunki, tj. wysokość okna przeglądarki jest większa niż pozycja startowa Y elementu lub gdy rozmiary okna są małe i scrollujemy poniżej pozycji startowej elementu. W innym wypadku element ma mieć position: relative, po to żeby nie przesłaniał elementów znajdujących się wyżej (patrz źródło float.html).

Innym sposobem byłoby dynamiczne zwiększanie wysokości elementu poprzedzającego element który chcemy mieć na dole - przy zwiększaniu wysokości okna element poprzedzający zwiększałby height o odpowiednią ilość pixeli aby zepchnąć nasz element na dół.

Mamy tu do czynienia z warunkowym stosowaniem stylów więc trzeba posiłkować się javascriptem. Ja osobiście odradzam takich praktyk. Wolałbym przeprojektować layout. Chociaż to wszystko zależy od projektu.

Stronę testowałem tylko w Firefox 3.6.10

Temat: CSS position(s)

Ale lepszy pomysł ma Michał ponieważ Marku to może w Mozilli przejść ale chyba nie przejdzie w IE i Chrom itp, też kiedyś w tym się bawiłem...

A wracają do tematu: to może Ci pomóc:

http://www.phpletter.com/Demo/Jquery-Floating-Box-Plugin/

Temat: CSS position(s)

Dzięki za pomoc :)