Witryny aplikacji internetowych - Pozycjonowanie
1. Do pozycjonowania elementów służy atrybut position.
2. Pozycjonowanie statyczne - przywraca normalne pozycjonowanie elementu. Używa się gdy, wcześniej podaliśmy np. w arkuszach stylów deklarację pozycjonowania tego typu elementów.
np.
<h1 style="position: static;">Nagłówek w pozycji domyślnej</h1>
3. Pozycjonowanie względne - pozwala przesunąć wybrany element w inne miejsce względem położenia pierwotnego. Parametry określają sposób tego przesunięcia.
np.
<p style="position: relative; left: 1cm;">Pozycja względna</p>
4. Pozycjonowanie bezwzględne - pozwala przesunąć wybrany element w inne miejsce względem brzegów strony, bloku albo ramki (gdy został umieszczony wewnątrz). Parametry określają sposób tego przesunięcia.
np.
<h1 style:"position: absolute; top 40px;">Najfajniejsza pozycja to...</h1>
5. Pozycjonowanie stałe - działa podobnie do pozycjonowania absolutnego, z tym, że pozycjonowanie stałe ustala elementu zawsze względem krawędzi okna przeglądarki (scrollując element nie rusza się).
np.
<div style="position:fixed; left 5%; color: red;">Będę cię wiecznie prześladować na tej stronie</div>
6. Gdy nakładamy kilka elementów na siebie, możemy określić, w jaki sposób będą one nakładane. Robimy to za pomocą atrybutu position. Nakładającym się elementom nadajemy numer (z-index) i stosujemy regułę, że elementy z wyższym numerem są nakładane na te z niższym numerem.
np.
<div style="color:silver; position:absolute; top 30px; z-index:1;">Wiecznie spóźnieni</div>
7. Tamowanie elementów - określa, które krawędzie elementu następującego po elemencie pływającym nie będą do niego przylegać.
np.
<h1 style="clear: left;">Skaczmy, tylko się nie zabijmy!</h1>
, gdzie clear: left - dotyczy tylko tych elementów, które pływają w lewą stronę
2. Pozycjonowanie statyczne - przywraca normalne pozycjonowanie elementu. Używa się gdy, wcześniej podaliśmy np. w arkuszach stylów deklarację pozycjonowania tego typu elementów.
np.
<h1 style="position: static;">Nagłówek w pozycji domyślnej</h1>
3. Pozycjonowanie względne - pozwala przesunąć wybrany element w inne miejsce względem położenia pierwotnego. Parametry określają sposób tego przesunięcia.
np.
<p style="position: relative; left: 1cm;">Pozycja względna</p>
4. Pozycjonowanie bezwzględne - pozwala przesunąć wybrany element w inne miejsce względem brzegów strony, bloku albo ramki (gdy został umieszczony wewnątrz). Parametry określają sposób tego przesunięcia.
np.
<h1 style:"position: absolute; top 40px;">Najfajniejsza pozycja to...</h1>
5. Pozycjonowanie stałe - działa podobnie do pozycjonowania absolutnego, z tym, że pozycjonowanie stałe ustala elementu zawsze względem krawędzi okna przeglądarki (scrollując element nie rusza się).
np.
<div style="position:fixed; left 5%; color: red;">Będę cię wiecznie prześladować na tej stronie</div>
6. Gdy nakładamy kilka elementów na siebie, możemy określić, w jaki sposób będą one nakładane. Robimy to za pomocą atrybutu position. Nakładającym się elementom nadajemy numer (z-index) i stosujemy regułę, że elementy z wyższym numerem są nakładane na te z niższym numerem.
np.
<div style="color:silver; position:absolute; top 30px; z-index:1;">Wiecznie spóźnieni</div>
7. Tamowanie elementów - określa, które krawędzie elementu następującego po elemencie pływającym nie będą do niego przylegać.
np.
<h1 style="clear: left;">Skaczmy, tylko się nie zabijmy!</h1>
, gdzie clear: left - dotyczy tylko tych elementów, które pływają w lewą stronę