Pozycjonowanie

W tym rozdziale dowiesz się...

• W jaki sposób przesunąć dowolny element strony o podaną odległość?
• W jaki sposób ustawić dowolny element strony w żądanym miejscu na ekranie?
• Jak ustawić element, aby nie przesuwał się podczas przewijania strony?
• Jak przywrócić domyślny sposób ustawienia elementu wypozycjonowanego?
• W jaki sposób ustawić elementy jeden na drugim? Jak ustawić element za tekstem?
• W jaki sposób automatycznie przyciąć do określonych rozmiarów obrazek (grafikę, zdjęcie) lub inny element strony (kadrowanie)?
• Jak ukryć dowolny element strony? W jaki sposób zmienić domyśle wyświetlanie dowolnych elementów strony, tak aby stały się wykazem czy tabelką?
• W jaki sposób schować element, tak aby pozostało po nim puste miejsce?
• Jak ustawić obrazek (grafikę, zdjęcie) lub dowolny inny element po lewej bądź po prawej stronie tekstu? Jak ustawić element na górze, na środku lub na dole innego elementu? Jak stworzyć indeks górny i dolny za pomocą CSS?
• Jak zabezpieczyć się przed nieestetycznym przyleganiem dwóch elementów oblewanych tekstem (np. obrazki)? W jaki sposób nie dopuścić, aby obok tekstu znajdował się obrazek ani inny element?

Relatywne

selektor { position: relative; parametry }

Można oczywiście łączyć parametry, np. left: 1cm; top: -10px. Należy jednak pamiętać o tym, że parametr left ma pierwszeństwo przed right (jeśli kierunek tekstu jest "ltr" - od lewej do prawej), natomiast top ma pierwszeństwo przed bottom. To znaczy jeśli np. podamy: left: 1cm; top: 2cm; right: 3cm; bottom: 4cm, to wartości right oraz bottom zostaną zignorowane.

Polecenie pozycjonowania relatywnego (względnego) pozwala przesunąć wybrany element w dowolną stronę względem jego położenia spoczynkowego, czyli pozycji gdy nie używamy żadnego pozycjonowania.

Jeśli w miejscu gdzie ma być umieszczony pozycjonowany element, znajdowało się wcześniej coś innego (tekst, grafika itp.), będzie to przykryte przez ten element. Należy przy tym pamiętać, że często ustawienie elementów strony zależy od rozdzielczości ekranu i rozmiarów okna przeglądarki!

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. Dlatego obrazek ten jest oddalony od lewej krawędzi swojego położenia spoczynkowego o 50px (pikseli), a od górnej o 45px.

Przykład pozycjonowania tekstu:

To jest tekst powiększony
To jest pozycjonowane pogrubienie tekstu

Pozycjonowanie tabel:

komórka1	komórka2
komórka3	komórka4

komórka1	komórka2
komórka3	komórka4

komórka1	komórka2
komórka3	komórka4

Pozycjonowanie odsyłaczy (możesz je klikać):

Pozycjonowanie relatywne
Pozycjonowanie absolutne
Nakładanie

Absolutne

selektor { position: absolute; parametry }

Można oczywiście łączyć parametry, np. left: 1cm; top: -10px. Należy jednak pamiętać o tym, że parametr left ma pierwszeństwo przed right (jeśli kierunek tekstu jest "ltr" - od lewej do prawej), natomiast top ma pierwszeństwo przed bottom. To znaczy jeśli np. podamy: left: 1cm; top: 2cm; right: 3cm; bottom: 4cm, to wartości right oraz bottom zostaną zignorowane.

Blokiem obejmującym w tym przypadku zwykle jest okno przeglądarki lub ramka. Jednak jeżeli element, który pozycjonujemy znajduje się wewnątrz innego elementu, który wcześniej został poddany pozycjonowaniu (absolutnemu, relatywnemu lub ustalonemu), to położenie jest obliczane względem pozycji tego elementu nadrzędnego, a nie okna przeglądarki.

Polecenie pozycjonowania absolutnego (bezwzględnego) pozwala przesunąć wybrany element w dowolną stronę względem wybranych brzegów strony lub ewentualnie ramki albo "obejmującego bloku" (opis powyżej). Dzięki temu dany element będzie umieszczony tam na "sztywno", bez względu na miejsce, w którym wpisaliśmy polecenie pozycjonowania absolutnego. Jeżeli jako "wartość" wpiszemy liczbę ujemną, element znajdzie się częściowo lub całkowicie poza obrębem strony lub wyjdzie poza krawędzie "obejmującego bloku".

Jeśli w miejscu gdzie ma być umieszczony pozycjonowany element, znajdowało się wcześniej coś innego (tekst, grafika itp.), będzie to przykryte przez ten element. Należy przy tym pamiętać, że często ustawienie normalnych elementów strony zależy od rozdzielczości ekranu i rozmiarów okna przeglądarki!

Ustalone

(interpretuje Netscape 7/Mozilla/Firefox i Opera  6)

selektor { position: fixed; parametry }

Polecenie to działa podobnie jak pozycjonowanie absolutne, z tą różnicą, że pozycja elementu jest zawsze obliczana względem względem krawędzi okna przeglądarki (obszaru w którym znajduje się strona). Dodatkowo element taki jest nieruchomy podczas przewijania strony, przez co jest on przez cały czas widoczny na ekranie, dokładnie w tym samym miejscu. Daje to zbliżony efekt, jak nieruchome pojedyncze tło.

UWAGA! Polecenie nie interpretuje MSIE 6.

Statyczne

selektor { position: static }

Przywraca normalne pozycjonowanie elementu. Jest to przydatne np. w celu usunięcia ogólnej deklaracji pozycjonowania, umieszczonej w arkuszu stylów. Wystarczy wtedy, dla wybranych elementów strony, umieścić powyższe polecenie w stylu inline. Spowoduje to usunięcie pozycjonowania dla tych elementów, a jednocześnie utrzymanie dla innych (tego samego typu).

Przykład:

Gdyby w arkuszu stylów tej strony [zobacz: Wstawianie stylów], została umieszczona taka linijka:

h1 { position: relative; left: 50% }

to teraz wszystkie tytuły h1 byłyby pozycjonowane względnie. Ale jeśli chcielibyśmy zrezygnować z pozycjonowania dla kilku wybranych elementów, wystarczyłoby wpisać position: static w definicji inline.

Nakładanie

selektor { position: rodzaj; parametry; z-index: numer }

Polecenie to pozwala określić, w jaki sposób mają się nakładać elementy pozycjonowane. Normalnie kolejność nakładania (zakrywania) zależy od kolejności wpisywania poleceń pozycjonujących, tzn. elementy których polecenia zostały wpisane na końcu, zakrywają te poprzednie. Dzięki z-index możemy to dowolnie zmieniać. Nawet jeśli jakiś element pozycjonujemy jako ostatni, może on być na samym spodzie (zakryty przez inne) - wystarczy nadać mu parametr z-index: 1.

Polecenie to możemy zastosować, tylko jeśli element jest poddany pozycjonowaniu.

Interpretowane są również wartości ujemne. Dzięki podaniu np. z-index: -1, pozycjonowany element nie zakryje tekstu czy innych znaczników, które znajdowały się wcześniej w danym miejscu, lecz zostanie wyświetlony pod nimi (zwykły tekst i inne elementy domyślnie mają z-index: 0). Wartości "bardziej ujemne" (-2, -3, -4,...) mają zastosowanie, jeśli chcemy wyświetlić pod tekstem więcej elementów w określonej kolejności nakładania.

Przykład:

Oto przykład normalnego pozycjonowania (bez użycia z-index). Po wpisaniu:

<img style="width: 100px; height: 75px; position: relative" src="obrazek.jpg" alt="..." /><br />
<img style="position: relative; left: 84px; bottom: 91px" src="punkt.gif" alt="..." />

Otrzymamy:




A to przykład z użyciem z-index. Po wpisaniu:

<img style="width: 100px; height: 75px; position: relative; z-index: 2" src="obrazek.jpg" alt="..." /><br />
<img style="position: relative; left: 84px; bottom: 91px; z-index: 1" src="punkt.gif" alt="..." />

Otrzymamy:

Jak widać w drugim przypadku kolejność nakładania zmieniła się (teraz obrazek zakrywa punkt), mimo że polecenia zostały wpisane w takiej samej kolejności.

Obcinanie

(nie interpretuje Opera 6, a Internet Explorer 5-6 tylko w trybie Quirks)

selektor { position: absolute; clip: rect(góra, prawo, dół, lewo) }

Według CSS 2 polecenie można zastosować do elementów blokowych i zastępowalnych. Natomiast w CSS 2.1 ma ono zastosowanie tylko do elementów pozycjonowanych absolutnie.

UWAGA! Powyższy opis ustalania krawędzi cięcia pochodzi ze specyfikacji CSS 2.1. We wcześniejszej wersji - CSS 2 - wartości "góra, prawo, dół, lewo" oznaczały odległości cięcia od odpowiednich krawędzi elementu, a nie współrzędne wyciętego prostokąta! Przeglądarki interpretują podane parametry zgodnie z nową wersją specyfikacji - CSS 2.1.

Polecenie pozwala wyciąć z elementu pewien jego fragment (o kształcie prostokąta), a następnie wyświetlić go na ekranie.

Aby polecenie było interpretowane, element musi zostać poddany pozycjonowaniu absolutnemu (wystarczy podać: position: absolute;).

MSIE 5-6 obsługuje to polecenie tylko w trybie Quirks!

Przykład:

position: absolute; clip: rect(5px, 50px, 40px, 10px):






position: absolute; clip: rect(5px, auto, 40px, 10px):






Dla porównania bez wycinania:

Wyświetlanie

selektor { display: sposób }

Polecenie to pozwala określić sposób, w jaki będzie wyświetlony na ekranie dany element. Jest to bardzo przydatna funkcja, jeśli chcemy zrezygnować z domyślnego sposobu wyświetlania. Na przykład: wszystkie tytuły (<Hn>...</Hn>) są wyświetlane domyślnie w bloku, tzn. automatycznie są dodawane linijki przerwy pomiędzy danym tytułem a sąsiadującymi z nim elementami. Lecz dzięki poleceniu display: inline możliwe jest ustawienie dwóch sąsiednich tytułów w jednej linii.

Natomiast użycie display: list-item okazuje się przydatne w stosunku do elementu wykazu (znacznik <li>...</li>), kiedy chcemy przywrócić normalny sposób jego wyświetlania (który został zmieniony np. w arkuszu stylów), nie zmieniając jednocześnie wyświetlania dla innych elementów <li>...</li>. Oczywiście można w ten sposób również tworzyć punkty wykazu z innych znaczników niż <li>...</li>.

Polecenie display: none okazuje się bardziej przydatne, niż początkowo można by sądzić. Przykładowe zastosowanie to usunięcie niektórych elementów strony podczas jej drukowania [zobacz: Media]. Nie ma raczej sensu drukować menu nawigacyjnego, które powtarza się na każdej stronie, ponieważ na papierze i tak będzie ono całkowicie bezużyteczne. Zastosowanie tego polecenia pozwoli zaoszczędzić trochę papieru, a jednocześnie sprawi, że wydruk będzie wyglądał bardziej spójnie.

Polecenie display: none jest zbliżone do visibility: hidden. Różnica polega na tym, że pierwsze z nich całkowicie usuwa element z ekranu, natomiast drugie tylko go ukrywa - w miejscu gdzie miał być wyświetlony, jest widoczne puste miejsce.

Działanie display: run-in jest bardziej skomplikowane, dlatego posłużę się przykładem:

<div style="display: run-in">
	Ten element zostanie wyświetlony w linii w ramach brata.
</div>
<div>
	Brat ("block")
</div>
<br />
<div style="display: run-in">
	Ten element zostanie wyświetlony jako blok.
</div>
<span>Brat ("inline")</span>
<br /><br />
<div style="display: run-in">
	Ten element zostanie wyświetlony jako blok.
</div>
Tekst

Na ekranie powinniśmy zobaczyć taki układ treści:

Ten element zostanie wyświetlony w linii w ramach brata. Brat ("block")

Ten element zostanie wyświetlony jako blok.
Brat ("inline")

Ten element zostanie wyświetlony jako blok.
Tekst

Brat ("inline")

Tekst

UWAGA! MSIE 6 nie obsługuje tabelarycznych wartości wyświetlania elementów, inline-block ani run-in. Natomiast MSIE 5 dodatkowo nie radzi sobie z list-item. Wszystkie z CSS 2.1 są obsługiwane przez przeglądarkę Opera, a także w większej części Firefox (oprócz inline-block i run-in).

Przykład:

To jest zwykły tekst

To jest normalny akapit (wyświetlany w bloku).

To jest zwykły tekst

To jest akapit w linii.

To jest zwykły tekst



display: block display: block


display: inline display: inline


display: none display: none
(obrazek nie został wyświetlony, pomimo że polecenie odpowiedzialne za jego wstawienie zostało umieszczone na stronie)

<div style="display: table; border-spacing: 1px; border: 1px solid black">
<div style="display: table-row">
	<div style="display: table-cell; border: 1px solid gray">komórka1</div>
	<div style="display: table-cell; border: 1px solid gray">komórka2</div>
</div>
<div style="display: table-row">
	<div style="display: table-cell; border: 1px solid gray">komórka3</div>
	<div style="display: table-cell; border: 1px solid gray">komórka4</div>
</div>
</div>

Jest to odpowiednik następującej tabeli:

<table style="border-spacing: 1px; border: 1px solid black">
<tr>
	<td style="border: 1px solid gray">komórka1</td>
	<td style="border: 1px solid gray">komórka2</td>
</tr>
<tr>
	<td style="border: 1px solid gray">komórka3</td>
	<td style="border: 1px solid gray">komórka4</td>
</td>
</table>

komórka1	komórka2
komórka3	komórka4

To jest zwykły tekst To jest zwykły tekst

Dla porównania zwykły blok:

To jest zwykły tekst To jest zwykły tekst

Widzialność

selektor { visibility: typ }

Polecenie to steruje wyświetlaniem elementu na ekranie. Pozwala ukryć dowolny element, a w jego miejsce wprowadzić pustą przestrzeń o takich samych rozmiarach, jakie miałby element, gdyby tylko był widoczny.

Polecenie visibility: hidden jest zbliżone do display: none. Różnica polega na tym, że drugie z nich całkowicie usuwa element z ekranu, natomiast pierwsze tylko go ukrywa - w miejscu gdzie miał być wyświetlony, jest widoczne puste miejsce.

UWAGA! MSIE 6 nie obsługuje wartości collapse, a Firefox obsługuje ją błędnie (usuwa zawartość, ale nie pozostawia po niej wolnej przestrzeni). Wartość ta jest w pełni obsługiwana przez Operę.

Przykład:

visibility: visible visibility: visible


visibility: hidden visibility: hidden
(obrazek jest niewidzialny - na ekranie pozostała pusta przestrzeń o rozmiarach takich jak ukryty obrazek)


Dla porównania:
display: none display: none
(obrazek nie został wyświetlony, a dodatkowo na ekranie nie pozostała żadna pusta przestrzeń)

Dla drugiego wiersza visibility: collapse

komórka1	komórka2
komórka3	komórka4
komórka5	komórka6

visibility: collapse na innym elemencie:

visibility: collapse visibility: collapse

Ustawienie

Ustawienie w poziomie

selektor { float: sposób }

Polecenia nie można zastosować do elementów pozycjonowanych absolutnie.

Polecenie pozwala zdefiniować ustawienie danego elementu względem elementów, które z nim sąsiadują. Dzięki temu możemy ustalić sposób "oblewania" tekstem elementu pływającego (np. obrazka).

Przykład:

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...


float: right... float: right... float: right... float: right... float: right... float: right... float: right... float: right... float: right... float: right... float: right... float: right... float: right... float: right... float: right... float: right... float: right... float: right... float: right... float: right... float: right... float: right... float: right... float: right... float: right...


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...

Ustawienie w pionie

selektor { vertical-align: sposób }

Polecenie można zastosować do elementów wyświetlanych w linii (inline) lub komórek tabeli (<td>...</td> i <th>...</th>).

UWAGA! MSIE 5.0 interpretuje nieco odmiennie (niż MSIE 5.5-6) wartości top oraz bottom. Natomiast MSIE 4 obsługuje tylko wartości sub oraz super. Ponadto MSIE 5-5.5 nie obsługuje wartości w jednostkach długości ani procentowych.

Przykład:

komórka<br /> 1	komórka2	komórka3
komórka<br /> 4	komórka5	<td style="vertical-align: bottom">

<img style="vertical-align: text-top" />

<img style="vertical-align: middle" />

<img style="vertical-align: text-bottom" />

<img style="vertical-align: 50%" />

<img style="vertical-align: baseline" />

<img style="vertical-align: -1em" />


Tekstvertical-align: super

Tekstvertical-align: sub

Ilustracja różnic pomiędzy top a text-top oraz bottom a text-bottom (we wszystkich przypadkach pierwszy obrazek posiada przypisany styl vertical-align: middle):

<img style="vertical-align: top" />

<img style="vertical-align: text-top" />

<img style="vertical-align: bottom" />

<img style="vertical-align: text-bottom" />

Jak widać, wartości top i bottom odnoszą się do całej linijki, więc jeżeli znajduje się w niej jakiś nienaturalnie wysoki element, faktycznie nastąpi wyrównanie względem niego. Natomiast wartości text-top i text-bottom w ogóle nie zwracają uwagi na elementy inne niż tekst, a zatem wyrównanie odbędzie się zawsze względem tekstu, a nie względem wysokości linii.

(Poniżej jest błąd w MSIE 5.0!)

<span style="vertical-align: top">

<span style="vertical-align: bottom">

Przyleganie

selektor { clear: sposób }

Polecenie można zastosować tylko do elementów wyświetlanych w bloku (block).

Polecenie pozwala ustalić 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ć.

Polecenia pozwalające sterować przyleganiem elementów są dosyć przydatne, chociaż początkowo może się tak nie wydawać. Na przykład umieszczamy na stronie opis poparty odpowiednimi ilustracjami, które mają być ułożone po prawej stronie względem otaczającego tekstu (float: right). Jeśli w kodzie źródłowym umieścimy obrazki zbyt blisko siebie, tzn. nie rozdzielimy ich odpowiednio długim tekstem opisu, nie zostaną one ułożone jeden pod drugim - tak jak prawdopodobnie oczekiwaliśmy - lecz obok siebie. Co więcej, ułożenie będzie zależało od rozdzielczości ekranu i rozmiarów okna przeglądarki (w mniejszej rozdzielczości wszystko może być w porządku). Aby pozbyć się tych niedogodności wystarczy dla obrazków określić dodatkowo deklarację: clear: right.

Przykład:

<img style="float: left" />

<p style="clear: left">Lewy bok tego akapitu nie przylega do obrazka</p>

<img style="float: left" />

<p style="clear: right">Prawy bok tego akapitu nie przylega do obrazka</p>

<img style="float: left" />

<p style="clear: both">Żaden bok tego akapitu nie przylega do obrazka</p>

<img style="float: left" />

<p style="clear: none">Brak ograniczeń dotyczących przylegania</p>

• Tabele
• Kursory

• Do góry
• Strona główna