Pobieranie prezentacji. Proszę czekać

Pobieranie prezentacji. Proszę czekać

Przygotowali: Rafał Bajno Tomasz Baryłowicz. Metody pozycjonowania elementów Część I: Pozycjonowanie Divów Pozycjonowanie Relatywne (Relative) Pozycjonowanie.

Podobne prezentacje


Prezentacja na temat: "Przygotowali: Rafał Bajno Tomasz Baryłowicz. Metody pozycjonowania elementów Część I: Pozycjonowanie Divów Pozycjonowanie Relatywne (Relative) Pozycjonowanie."— Zapis prezentacji:

1 Przygotowali: Rafał Bajno Tomasz Baryłowicz

2 Metody pozycjonowania elementów Część I: Pozycjonowanie Divów Pozycjonowanie Relatywne (Relative) Pozycjonowanie Absolutne (Absolute) Pozycjonowanie Ustalone (Fixed) Nakładanie elementów (z-index) Oblewanie elementów tekstem (float)

3 Metody pozycjonowania elementów Pozycjonowanie Divów: left: wartość; odległość od lewej krawędzi strony right: wartość; odległość od prawej krawędzi strony top: wartość; odległość od górnej krawędzi strony bottom: wartość; odległość od dolnej krawędzi strony height: wartość; wysokość bloku width: wartość; szerokość bloku przykład

4 Metody pozycjonowania elementów Pozycjonowanie Relatywne (Relative): selektor { position: relative; parametry } *Selektorem może być praktycznie dowolny znacznik Parametry: left: wartość odległość od lewej krawędzi położenia spoczynkowego top: wartość odległość od górnej krawędzi położenia spoczynkowego right: wartość odległość od prawej krawędzi położenia spoczynkowego bottom: wartość odległość od dolnej krawędzi położenia spoczynkowego

5 Metody pozycjonowania elementów Pozycjonowanie Relatywne (Relative): Kolejność ustawiania parametrów : left: 1cm; right: 3cm; top: 2cm; bottom: 4cm Poprawna kolejność dla wszystkich wartości left: 1cm; top: 2cm; right: 3cm; bottom: 4cm wartości right oraz bottom zostaną zignorowane.

6 Metody pozycjonowania elementów Pozycjonowanie Relatywne (Relative): Przykład: Szary prostokąt poniżej, który jest częściowo przykryty, przedstawia położenie spoczynkowe obrazka, poddanego pozycjonowaniu: position: relative; left: 50px; top: 45px.

7 Metody pozycjonowania elementów Pozycjonowanie Absolutne (absolute): selektor { position: absolute; parametry } *Selektorem może być praktycznie dowolny znacznik Parametry: left: wartość odległość od lewej krawędzi bloku obejmującego top: wartość odległość od górnej krawędzi bloku obejmującego right: wartość odległość od prawej krawędzi bloku obejmującego bottom: wartość odległość od dolnej krawędzi bloku obejmującego

8 Metody pozycjonowania elementów Pozycjonowanie Absolutne (absolute): Utwórzmy w tym miejscu (pozycjonowanie względne) blok zdefiniowany w: Umieśćmy w nim grafikę, pozycjonowaną w następujący sposób: oraz akapit spozycjonowany następująco: To jest jakiś akapit.. To jest jakiś akapit..

9 Metody pozycjonowania elementów Pozycjonowanie Absolutne (absolute): I oto efekt - zwróć uwagę, że grafika i akapit są pozycjonowane w stosunku do nadrzędnego bloku div, czyli swojego rodzica, a nie w stosunku do strony, czyli odległego w hierarchii przodka

10 Metody pozycjonowania elementów Pozycjonowanie Ustalone (fixed): selektor { position: fixed; parametry } *Selektorem może być praktycznie dowolny znacznik Parametry: left: wartość odległość od lewej krawędzi okna top: wartość odległość od górnej krawędzi okna right: wartość odległość od prawej krawędzi okna bottom: wartość odległość od dolnej krawędzi okna

11 Metody pozycjonowania elementów Pozycjonowanie Ustalone (fixed): Przykład

12 Metody pozycjonowania elementów Nakładanie elementów (z-index): selektor {position: rodzaj; parametry; z-index: numer } Selektorem może znacznik poddany pozycjonowaniu rodzaj relative, absolute Numer pojedyncza liczba, określającą, kolejność nakładania elementów (nr 1 będzie na samym spodzie - zakryty przez inne). Polecenie to pozwala określić, w jaki sposób mają się nakładać elementy pozycjonowane, Czyli…

13 Metody pozycjonowania elementów Nakładanie elementów (z-index): Wartość najmniejsza z-index znajduję się na samym spodzie, natomiast wartośc największa n samym wierzchu :>

14 Metody pozycjonowania elementów Nakładanie elementów (z-index): Oto przykład normalnego pozycjonowania (bez użycia z-index): img img Otrzymujemy

15 Metody pozycjonowania elementów Nakładanie elementów (z-index): Oto przykład z użyciem z-index: img img Otrzymujemy

16 Metody pozycjonowania elementów Nakładanie elementów (z-index): Kontekst stosu: Z uwagi na wyższy z-index dla kontekstu 1 jego elementy będą przewyższały elementy w Kontekście 2 Dla Kontekstu 1 z-index: 2 Dla Kontekstu 2 z-index: 1 Brak przypisanych wartości dla obydwu Kontekstów Brak przypisania z-indexów powoduje poprawną kolejność elementów

17 Metody pozycjonowania elementów Oblewanie elementów tekstem (float) selektor { float: sposób } jako "sposób" należy podać: left element ustawiony po lewej stronie, względem elementów sąsiadujących Rightelement ustawiony po prawej stronie, względem elementów sąsiadujących none element nie sąsiaduje z innymi Polecenia nie można zastosować do elementów pozycjonowanych absolutnie!

18 Metody pozycjonowania elementów Oblewanie elementów tekstem (float) Przykład: float: none... float: none... float: none... float: none... float: none...float: none... float: none... float: none... float: none... float: none... float: none... float: none... float: none... float: none... float: none... float: none... float: none... float: none... float: none... float: none... float: none... float: none... float: none... float: none... float: none... float: left... float: left... float: left... float: left... float: left...float: left... float: left... float: left... float: left... float: left...float: left... float: left... float: left... float: left... float: left...float: left... float: left... float: left... float: left... float: left...float: left... float: left... float: left... float: left... float: left...


Pobierz ppt "Przygotowali: Rafał Bajno Tomasz Baryłowicz. Metody pozycjonowania elementów Część I: Pozycjonowanie Divów Pozycjonowanie Relatywne (Relative) Pozycjonowanie."

Podobne prezentacje


Reklamy Google