Style CSS - Pozycjonowanie

Pozycjonowanie Relatywne Absolutne Ustalone Statyczne Nakładanie Kadrowanie Wyświetlanie Widzialność Ustawienie Przyleganie Rozmiary Bibliografia

Relatywne SEL { position: relative; parametry } left/right/top/bottom: odległość od lewej/prawej/górnej/dolnej krawędzi położenia spoczynkowego left: 1cm; top: -10px

Absolutne SEL { position: absolute; parametry } left/right/top/bottom: odległość od lewej/prawej/górnej/dolnej krawędzi strony left: 1cm; bottom: 30px

Ustalone SEL { position: fixed; parametry } left/right/top/bottom: stała odległość od lewej/prawej/górnej/dolnej krawędzi przeglądarki left: 10px; top: 3cm

Statyczne style="position: static" przywraca normalne pozycjonowanie

X Y Nakładanie SEL { position: typ; parametry; z-index: nr} ustalenie kolejności nakładania się <IMG style="position: relative; z-index: 1" SRC=„X"> <IMG style="position: relative; right: 20px; top: -20px; z-index: 2" SRC=„Y"> Y X

Kadrowanie SEL { position: absolute; clip: rect(góra, prawo, dół, lewo) } auto == nie tnij position: absolute; clip: rect(25px, auto, 40px, 10px)

Wyświetlanie SEL { display: typ } block - element będzie wyświetlony w bloku (odstęp z góry i z dołu) inline - element będzie wyświetlony w linii (sąsiadująco z innymi) list-item - przywraca domyślne wyświetlanie dla elementu wykazu <LI> none - element nie będzie wyświetlony

Wyświetlanie block inline none SEL { display: typ }

Widzialność SEL { visibility: tryb } visibile - widzialny hidden - niewidoczny

Ustawienie poziome (pływanie) SEL { float: tryb } left right none

Ustawienie pionowe SEL { vertical-align: tryb } baseline - wyrównuje linię bazową elementu do linii bazowej elementu nadrzędnego (domyślnie) text-top / middle / text-bottom super / sub top / bottom

Ustawienie pionowe text-top middle text-bottom text-top - szczyt elementu = szczyt tekstu elementu nadrzędnego middle - ustawia element na środku wysokości elementów sąsiadujących text-bottom - podstawa elementu = podstawa tekstu elementu nadrzędnego

Ustawienie pionowe super sub abc abc sub super sub super - indeks górny bez zmiany wielkości tekstu sub - indeks dolny bez zmiany wielkości tekstu

Ustawienie pionowe top bottom abc bottom abc top bottom top - szczyt el. = szczyt najwyższego elementu linii, w której się znajduje bottom - podstawa el. = podstawa elementu położonego najniżej w linii, w której się znajduje

Przyleganie SEL { clear: typ } left / right / both / none ustala pozycję elementów sąsiadujących względem elementu pływającego (np. obrazka). Określa które krawędzie elementu następującego po elemencie pływającym nie będą do niego przylegać.

Lewy bok nie przylega do obrazka Przyleganie <IMG style="float: left"> <IMG style="float: left"> Prawy bok nie przylega ... Lewy bok nie przylega do obrazka <P style="clear: right">(...)</P> <P style="clear: left">(...)</P>

Przyleganie <IMG style="float: left"> Dowolność przylegania Żaden bok nie przylega do obrazka <P style="clear: both">(...)</P> <P style="clear: none">(...)</P>

abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstu Rozmiary SEL { width: typ } SEL { height: typ } abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstu height: 20px width: 200px

Bibliografia www.kurshtml.boo.pl - Sławomir Kokłowski Kurs HTML - Paweł Wimmer, wyd. Lupus