Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki
Tabele

Pozycja w stosie

Email Drukuj PDF

Tematy: pozycjonowanie | odległości | pionowe wyrównanie | przepływanie i oblewanie | stos

Dane w pigułce
Zastosowanie regulowanie kolejności nakładających się na siebie warstw
Dziedziczenie nie
Wartości liczba, auto
Wartość domyślna auto
Przykład z-index:2
Uwagi
Odpowiednik w HTML brak

Aby zdefiniować pozycję elementu w stosie, należy wpisać w definicji stylu z-index: wartość.

Możemy regulować pionową pozycję w stosie nałożonych na siebie elementów (tzw. z-order). Służy do tego polecenie z-index: n.

<div style="position: relative; z-index: 1">
<img src="ami.gif" width=80 height=114 alt="Ami ">
</div>
<div style="position: relative; top: -84px; left: 30px; z-index: 3">
<img src="enter.gif" width=80 height=114 alt="Enter ">
</div>
<div style="position: relative; top: -168px; left: 60px; z-index: 2">
<img src="pcq.gif" width=80 height=114 alt="PCQ">
</div>

Obrazki są układane w kolejności od z-index: 1 (na spodzie) do z-index: 3 (na wierzchu).

Ami
Enter
PCQ

Analogicznie, w przypadku tekstu:

<div style="position:relative; z-index: 2; font-size:300%; color:red;">To jest jakiś tam tekst;</div>
<div style="position:relative; left:30px; top: -50px; z-index: 1; font-size:300%; color:blue">To jest inny tekst</div>

To jest jakiś tam tekst
To jest inny tekst

Interpretacja: Internet Explorer, Firefox, Opera, Chrome

 

HTML5. Rusz głową.

HTML5. Rusz głową!

HTML5. Ćwiczenia praktyczne.

HTML5. Ćwiczenia praktyczne.

HTML5. Nieoficjalny podręcznik.

HTML5. Nieoficjalny podręcznik

Nowości Helionu

Statystyki

Użytkowników : 3556
Artykułów : 513
Zakładki : 28
Odsłon : 19062408