Pozycjonowanie

W tym rozdziale dowiesz się...

Relatywne

selektor { position: relative; parametry }
Selektorem może być praktycznie dowolny znacznik [zobacz: Wstawianie stylów].

Natomiast jako "parametry" należy podać:
  • 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
Wyraz "wartość" oznacza konkretną odległość (od podanej krawędzi) względem położenia elementu bez używania pozycjonowania - położenie spoczynkowe. Należy ją wpisać używając jednostek długości. Wartość ujemna oznacza przesunięcie w przeciwną stronę. Można również wpisać auto, co ustali wartość automatyczną.

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.

Położenie spoczynkowe
width: 100px; height: 75px; position: relative; left: 50px; top: 45px

Przykład pozycjonowania tekstu:

To jest tekst powiększony
To jest pozycjonowane pogrubienie tekstu

Pozycjonowanie tabel:

komórka1komórka2
komórka3komórka4
komórka1komórka2
komórka3komórka4
komórka1komórka2
komórka3komórka4

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

Pozycjonowanie relatywne
Pozycjonowanie absolutne
Nakładanie

Absolutne

selektor { position: absolute; parametry }
Selektorem może być praktycznie dowolny znacznik [zobacz: Wstawianie stylów].

Natomiast jako "parametry" należy podać:
  • 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
Wyraz "wartość" oznacza konkretną odległość od podanej krawędzi "obejmującego bloku". Należy ją wpisać używając jednostek długości. Wartość ujemna oznacza przesunięcie w przeciwną stronę. Można również wpisać auto, co ustali wartość automatyczną.

Można oczywiście łączyć parametry, np. left: 1cm; top: -10px. W tym przypadku można nawet określić jednocześnie odległości left i right, a także top wspólnie z bottom - pozwoli to rozciągnąć szerokość lub/i wysokość elementu pozycjonowanego w taki sposób, aby odległości jego odpowiednich krawędzi od brzegów bloku obejmującego były dokładnie takie, jak podano.

W przeglądarce MSIE 6.0 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! MSIE 7.0 zachowuje się już prawidłowo, tzn. nie ignoruje żadnych wartości, ale tylko jeśli strona jest wyświetlna w trybie zgodności ze standardami, tzn. nie w trybie Quirks.

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!

Przykład:

Przykład

Ustalone

selektor { position: fixed; parametry }
Selektorem może być praktycznie dowolny znacznik [zobacz: Wstawianie stylów].

Natomiast jako "parametry" należy podać:
  • 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
Wyraz "wartość" oznacza konkretną odległość od podanej krawędzi okna przeglądarki. Należy ją wpisać używając jednostek długości. Wartość ujemna oznacza przesunięcie w przeciwną stronę. Podanie auto oznacza położenie automatyczne. Można oczywiście łączyć parametry, np. left: 1cm; top: -10px.

Polecenie to działa podobnie jak pozycjonowanie absolutne, z tą różnicą, że pozycja elementu jest zawsze obliczana 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.0. W MSIE 7.0 wszystko jest w porządku, ale nie w trybie Quirks.

Przykład:

Przykład

Statyczne

selektor { position: static }
Selektorem może być praktycznie dowolny znacznik [zobacz: Wstawianie stylów].

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.

Przezroczystość

(CSS 3 - interpretuje Internet Explorer 9, Firefox 2, Opera, Chrome)

selektor { opacity: nieprzezroczystość }
Selektorem może być dowolny znacznik [zobacz: Wstawianie stylów].

Natomiast jako "nieprzezroczystość" należy podać liczbę rzeczywistą z przedziału od 0 (całkowita przezroczystość) do 1 (brak przezroczystości - domyślnie).

Sterując poziomem przezroczystości można wprowadzić na ekran efektowne warstwy imitujące zabarwione szyby. Trzeba jednak pamiętać, że ustalony poziom półprzezroczystości otrzymają wszystkie elementy znajdujące się wewnątrz danego znacznika - nie możemy cofnąć elementom wewnętrznym przezroczystości (tak aby stały się ponownie zupełnie nieprzezroczyste), możemy jedynie ustawić im jeszcze większą przezroczystość w stosunku do półprzezroczystego rodzica.

Przykład:

To jest dolna warstwa... To jest dolna warstwa... To jest dolna warstwa... To jest dolna warstwa... To jest dolna warstwa... To jest dolna warstwa... To jest dolna warstwa...
To jest górna, półprzezroczysta warstwa ("opacity: 0.5")... To jest górna, półprzezroczysta warstwa ("opacity: 0.5")... To jest górna, półprzezroczysta warstwa ("opacity: 0.5")...

Nakładanie

selektor { position: rodzaj; parametry; z-index: numer }
Selektorem może znacznik poddany pozycjonowaniu [zobacz: Wstawianie stylów].

Wyrażenie "position: rodzaj; parametry;" określa typ oraz parametry pozycjonowania (absolutne, relatywne lub ustalone).

Natomiast jako "numer" należy wpisać pojedynczą liczbę, określającą, kolejność nakładania pozycjonowanych elementów (element z numerem 1 będzie na samym spodzie - zakryty przez inne). Można również wpisać auto, co ustali wartość automatyczną.

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 elementów w kodzie źródłowym dokumentu, tzn. elementy które zostały wpisane na końcu, zakrywają te poprzednie. Dzięki z-index możemy to dowolnie zmieniać. Nawet jeśli jakiś element został wpisany 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 mniejsze od zera (-2, -3, -4,...) mają zastosowanie, jeśli chcemy wyświetlić pod tekstem więcej elementów w określonej kolejności nakładania:

z-index: -1
z-index: 0
z-index: 1
z-index: 2

co można przedstawić w trzech wymiarach następująco:

Stos nakładania

Skąd w ogóle wzięła się nazwa "z-index"? Index (indeks), to po prostu numer porządkowy określający kolejność. Natomiast przedrostek "z" odnosi się do trzeciego wymiaru układu współrzędnych, który swój początek ma w lewym-górnym rogu ekranu:

  1. oś "x" - biegnie poziomo w prawo
  2. oś "y" - biegnie pionowo w dół
  3. oś "z" - jest skierowana w stronę użytkownika patrzącego na ekran

Współrzędne ekranowe

Taki nietypowy układ współrzędnych, z osią "y" skierowaną w dół, pochodzi od pierwszych terminali tekstowych, gdzie pisząc kolejne znaki, kursor przesuwał się po ekranie w prawo, a po przejściu do kolejnej linijki tekstu - w dół. Oś "z", jeżeli chodzi o ścisłość, właściwie powinna być skierowana przeciwnie (w głąb ekranu), ale ponieważ pozycjonowane elementy zwykle nakładamy ponad tekstem, byłoby mało praktyczne, gdyby za każdym razem trzeba było posługiwać się liczbami ujemnymi. Warto zapamiętać tę zasadę, ponieważ odnosi się ona do wszystkich przypadków, gdzie występują współrzędne ekranowe, np. w edytorach do tworzenia i obróbki grafiki komputerowej.

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:

width: 100px; height: 75px; position: relative
position: relative; left: 84px; bottom: 91px

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:

width: 100px; height: 75px; position: relative; z-index: 2
position: relative; left: 84px; bottom: 91px; z-index: 1

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.

Kontekst stosu

Porządek nakładania elementów nazywamy stosem. Porządek ten nie jest taki sam dla całego dokumentu, lecz może istnieć kilka odrębnych kontekstów stosu (ang. stacking context). Każdy element pozycjonowany (również relatywnie), posiadający wartość z-index inną niż auto, tworzy nowy kontekst, który jest niezależny od innych. W CSS 3 kontekst stosu jest tworzony również przez elementy z ustaloną przezroczystością mniejszą niż 1. Kolejność nakładania elementów, znajdujących się wewnątrz kontekstu, jest ustalana zgodnie z wartością z-index - większa wartość przykrywa mniejsze. Różnica pojawia się, w przypadku rozpatrywania nakładania elementów z dwóch odrębnych kontekstów stosu. W takim przypadku, jeśli element tworzący jeden kontekst, ma wyższą wartość z-index niż dla drugiego kontekstu, wszystkie elementy z pierwszego będą przykrywały drugie, niezależnie jaką wartość z-index posiadają. Może się zatem zdarzyć, że element z wartością "z-index: 1" z pierwszego kontekstu znajdzie się ponad elementem "z-index: 2" z drugiego kontekstu, ponieważ pierwszy kontekst w całości przykrywa drugi.

MSIE 7 nieprawidłowo wyznacza nowy kontekst stosu dla każdego bloku obejmującego, nawet jeśli nie ma on przypisanej wartości z-index innej niż auto (domyślnie).

Przykład:

Element "z-index: 1" z pierwszego stosu powinien przykrywać "z-index: 2" z drugiego kontekstu, ponieważ drugi kontekst ma niższy z-index od pierwszego, a więc wszystkie jego elementy powinny być przykryte przez zawartość pierwszego stosu:

Kontekst pierwszy (z-index: 2)
Element z kontekstu pierwszego (z-index: 2)
 
Element z kontekstu pierwszego (z-index: 1)   
Kontekst drugi (z-index: 1)
 
 
Element z kontekstu drugiego (z-index: 2)
 
 
Element z kontekstu drugiego (z-index: 1)

Gdyby bloki oznaczone jako "kontekst" (pierwszy i drugi) nie miały przypisanej wartości z-index", nie powinny wyznaczać kontekstu stosu. Wtedy kolejność nakładania powinna być następująca (poczynając od elementów przykrytych na samym spodzie): "z-index: 1" (blok pierwszy), "z-index: 1" (blok drugi), "z-index: 2" (blok pierwszy), "z-index: 2" (blok drugi). Niestety MSIE 7 zachowuje się w takim przypadku nieprawidłowo i wyznacza dwa odrębne konteksty stosu, z których drugi przykrywa oba elementy pierwszego:

Blok obejmujący pierwszy
Element z bloku pierwszego (z-index: 2)
 
Element z bloku pierwszego (z-index: 1)   
Blok obejmujący drugi
 
 
Element z bloku drugiego (z-index: 2)
 
 
Element z bloku drugiego (z-index: 1)

Obcinanie

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

Według CSS 2 polecenie można zastosować do elementów blokowych i zastępowanych. Natomiast w CSS 2.1 ma ono zastosowanie tylko do elementów pozycjonowanych absolutnie. Przeglądarki stosują się do wytycznych z CSS 2.1.

Wyrażenia: "góra, prawo, dół, lewo" oznaczają wartości współrzędnych wyciętego prostokąta, określane względem lewego-górnego narożnika elementu, tzn. są to pozycje odpowiednio: górnego-prawego oraz dolnego-lewego wierzchołka wyciętego prostokąta. Wartości te należy podawać za pomocą jednostek długości. Za każdą z nich można wpisać również auto, co oznacza pominięcie cięcia z wybranej strony.
Zamiast całego wyrażenia rect(góra, prawo, dół, lewo) można również podać auto - wartość automatyczna.

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.

Specyfikacja CSS 2 wprowadziła dość poważne zamieszanie, jeżeli chodzi o składnię tego polecenia. Nie dość, że sposób ustalania krawędzi prostokąta cięcia został zupełnie zmieniony w CSS 2.1, ponieważ żadna przeglądarka - prawdopodobnie ze względu na trudności w implementacji - nie interpretowała wcześniejszej propozycji, to jeszcze na dodatek CSS 2 niejednoznacznie określiła, jakimi separatorami powinny być rozdzielone wartości w nawiasie rect(...). CSS 2.1 mówi wyraźnie: każda przeglądarka musi obsługiwać jako separator znak przecinka, ale dodatkowo może przyjmować samą spację. Całe to zamieszanie sprawiło, że MSIE 6.0-7.0 interpretuje wymienione separatory dokładnie na odwrót: spacja działa zawsze, a przecinek tylko w trybie wstecznej zgodności. Firefox i Opera obsługują równorzędnie oba separatory.

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

MSIE 6.0-7.0 obsługuje to polecenie:
  • w trybie Quirks - zawsze,
  • w trybie zgodności ze standardami - tylko jeżeli wartości w nawiasie rect(...) nie zostały rozdzielone przecinkami.

Przykład:

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

position: absolute; clip: rect(5px, 50px, 40px, 10px); width: 100px; height: 75px




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

position: absolute; clip: rect(5px 50px 40px 10px); width: 100px; height: 75px




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

position: absolute; clip: rect(5px, auto, 40px, 10px); width: 100px; height: 75px




Dla porównania bez wycinania:

Zwykły obrazek

Wyświetlanie

selektor { display: sposób }
Selektorem może być praktycznie dowolny znacznik [zobacz: Wstawianie stylów].

Natomiast jako "sposób" należy podać:
  • 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 - element wykazu: <li>...</li>
  • none - element nie będzie wyświetlany
  • inline-block - element zachowuje się podobnie jak element zastępowany (Firefox 3, Opera 7, Chrome, Konqueror)
  • run-in - jeśli po elemencie następuje brat będący blokiem, element zostanie sformatowany jako "inline" (w linii) w ramach treści brata. W przeciwnym razie element zostanie sformatowany jako "block" (Opera 6, Chrome)
  • table - tabela blokowa: <table>...</table>
  • inline-table - tabela "inline": <table>...</table>
  • table-row-group - grupa wierszy tabeli: <tbody>...</tbody>
  • table-header-group - nagłówek tabeli: <thead>...</thead>
  • table-footer-group - stopka tabeli: <tfoot>...</tfoot>
  • table-row - wiersz tabeli: <tr>...</tr>
  • table-column-group - grupa kolumn tabeli: <colgroup>...</colgroup>
  • table-column - kolumna tabeli: <col>
  • table-cell - komórka tabeli: <td>...</td>, <th>...</th>
  • table-caption - tytuł (podpis) tabeli: <caption>...</caption>
  • compact - analogicznie jak run-in (CSS 2, ale nie CSS 2.1)
  • marker - wyróżnik wykazu (CSS 2, ale nie CSS 2.1)

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

UWAGA! MSIE 6.0 ani 7.0 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 i Chrome, a także w większej części Firefox 3 i Konqueror (oprócz run-in) - Firefox 2 nie obsługuje również inline-block. W MSIE 8.0 wszystko jest w porządku, ale tylko w trybie Standards Compliance.

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: blockdisplay: block


display: inline display: inlinedisplay: inline


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


<div style="display: list-item">...</div>
<div style="display: list-item">...</div>
<div style="display: list-item">...</div>



<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>
komórka1
komórka2
komórka3
komórka4

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>
</tr>
</table>
komórka1komórka2
komórka3komórka4



To jest zwykły tekst
display: inline-block; width: 150px; height: 100px; background-color: silver
To jest zwykły tekst

Dla porównania zwykły blok:

To jest zwykły tekst
width: 150px; height: 100px; background-color: silver
To jest zwykły tekst

Widzialność

selektor { visibility: typ }
Selektorem może być praktycznie dowolny znacznik [zobacz: Wstawianie stylów].

Natomiast jako "typ" należy podać:
  • visible - element będzie widoczny na ekranie (domyślnie)
  • hidden - element zostanie ukryty, a w jego miejsce pojawi się pusta przestrzeń o takich samych rozmiarach jak element (gdyby był widoczny)
  • collapse - jeżeli użyte dla wierszy (<tr>...</tr>), grup wierszy (<tbody>...</tbody>), kolumn (<col>) lub grup kolumn (<colgroup>...</colgroup>) tabeli, ukrywa całą zawartość wiersza (wierszy) bądź kolumny (kolumn), bez konieczności obliczania na nowo rozplanowania tabeli. Dla innych elementów działa tak samo jak wartość hidden.

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 7.0 nie obsługuje wartości collapse (w MSIE 8.0 wszystko jest w porządku, ale tylko w trybie Standards Compliance).

W przypadku zastosowania "visibility: collapse" dla elementów tabeli, Opera 10.10, Chrome i Konqueror usuwają co prawda tak oznaczone elementy, ale pozostawiają po nich pustą przestrzeń. Opera 10.50, Firefox i MSIE 8.0 w takim przypadku usuwają całą wolną przestrzeń. W założeniu ma to być przydatne do realizacji wszelkiego rodzaju dynamicznych efektów ukrywania fragmentów tabeli (np. za pomocą JavaScript) - eliminuje "przeskakiwanie" komórek powodowane zmianą rozplanowania tabeli przy ich tradycyjnym usuwaniu.

Przykład:

visibility: visible visibility: visible visibility: visible


visibility: hidden 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 display: none
(obrazek nie został wyświetlony, a dodatkowo na ekranie nie pozostała żadna pusta przestrzeń)


Dla drugiego wiersza visibility: collapse
komórka1komórka2
komórka3komórka4 - o szerszej zawartości
komórka5komórka6

...i to samo przy sterowaniu wyświetlaniem:

Dla drugiego wiersza display: none
komórka1komórka2
komórka3komórka4 - o szerszej zawartości
komórka5komórka6

Dla drugiego wiersza visibility: hidden
komórka1komórka2
komórka3komórka4 - o szerszej zawartości
komórka5komórka6

Dla porównania ta sama tabela bez zmiany widzialności:

komórka1komórka2
komórka3komórka4 - o szerszej zawartości
komórka5komórka6

Zwróć uwagę na różnice pomiędzy działaniem "visibility: collapse" a "display: none". W pierwszym przypadku, mimo iż wiersz z szerszą komórką został ukryty, kolumna w której się znajdowała nie zmniejszyła swojej szerokości. W drugim przypadku rozplanowanie tabeli zostało wyznaczone na nowo, dlatego stała się ona węższa, gdyż dopasowała się do zawartości tylko widzialnych komórek. Podkreślenia wymaga również fakt, że przykładowa tabela z "visibility: collapse" nie powinna wyglądać tak samo jak "visibility: hidden" - jeżeli wyglądają identycznie, to znaczy że Twoja przeglądarka nieprawidłowo interpretuje to polecenie.

visibility: collapse na innym elemencie (obrazek z przykładu na samym początku) - zachowanie powinno być identyczne, jak dla "visibility: hidden":

visibility: collapse visibility: collapse visibility: collapse

Ustawienie

Ustawienie w poziomie

selektor { float: sposób }

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

Selektorem może być praktycznie dowolny znacznik, który nie został wypozycjonowany absolutnie [zobacz: Wstawianie stylów].

Natomiast jako "sposób" należy podać:
  • left - element ustawiony po lewej stronie, względem elementów sąsiadujących
  • right - element ustawiony po prawej stronie, względem elementów sąsiadujących
  • none - element nie sąsiaduje z innymi

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

Jako "sposób" należy podać:
  • baseline - wyrównuje linię bazową elementu do linii bazowej elementu nadrzędnego (domyślnie)
  • middle - ustawia element na środku wysokości elementów sąsiadujących
  • text-top - wyrównuje szczyt elementu do szczytu tekstu elementu nadrzędnego
  • text-bottom - wyrównuje podstawę elementu do podstawy tekstu elementu nadrzędnego
  • super - tworzy indeks górny z elementu, ale nie zmienia wielkości tekstu
  • sub - tworzy indeks dolny z elementu, ale nie zmienia wielkości tekstu
  • top - wyrównuje szczyt elementu do szczytu najwyższego elementu linii, w której się znajduje
  • bottom - wyrównuje podstawę elementu do podstawy elementu położonego najniżej w linii, w której się znajduje
  • wartość w jednostkach długości - przesunięcie ponad (wartości dodatnie) lub poniżej (wartości ujemne) linii bazowej
  • wartość procentową - przesunięcie ponad (wartości dodatnie) lub poniżej (wartości ujemne) linii bazowej względem wysokości linii

UWAGA! MSIE 5.0 interpretuje nieco odmiennie wartości top oraz bottom. Natomiast MSIE 4 obsługuje tylko wartości sub oraz super. Ponadto MSIE 5.0 i 5.5 nie obsługuje wartości w jednostkach długości ani procentowych.

Przykład:

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



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

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

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

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

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

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


Tekstvertical-align: super

Tekstvertical-align: sub

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

Zwykły obrazek<span style="vertical-align: top">

Zwykły obrazek<span style="vertical-align: bottom">

Przyleganie

selektor { clear: sposób }

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

Jako "sposób" należy podać:
  • left - lewy bok elementu nie przylega do poprzedzającego elementu pływającego
  • right - prawy bok nie przylega
  • both - żaden bok nie przylega
  • none - brak ograniczeń

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:

float: left <img style="float: left">

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




float: left <img style="float: left">

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









float: left <img style="float: left">

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




float: left <img style="float: left">

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