DHTML0127

Rozdział 7.

Definiowanie porządku wyświetlania

Definiowanie porządku wyświetlania

Różne elementy w oknie przeglądarki mogą być umieszczane na ekranie poprzez określenie wartości właściwości left i top. Odpowiadają one współrzędnym x i y na ekranie, przy czym początkiem układu współrzędnych jest lewy górny wierzchołek strony. Pomimo że ekran jest obszarem dwuwymiarowym, to elementom, które są na nim umieszczane można przypisać trzeci wymiar porządek wyświetlania w stosunku do innych elementów.

Na rysunku 7.9 możesz zobaczyć, w jaki sposób każdemu umiejscowionemu obiektowi jest automatycznie przypisywany numer, rozpoczynający się od 0, a którego wartość zależy od kolejności, w jakiej element pojawia się w kodzie HTML-owym oraz od jego elementów potomnych i innych elementów znajdujących się na tym samym poziomie zagnieżdżenia. Ten numer nazywany jest z-indeksem. Wartość z-indeksu elementu obrazuje jego związek z innymi elementami w oknie.

Jeśli zawartości elementów nakładają się na siebie, to element o wyższej wartości z-indeksu

o niższej wartości z-indeksu.

Możesz zmienić oryginalny porządek

wyświetlania elementów na stronie poprzez

bezpośrednie określenie wartości właściwości

z-index. Na rysunku 7.10 przedstawionych zostało kilka elementów (patrz listing 7.9), których kolejność wyświetlania została zmieniona w stosunku do kolejności naturalnej (patrz rysunek 7.11).

Aby zdefiniować z-indeks elementu

1.    #elementO{

Podaj selektor.

2.    position: absolule;

Aby umieścić element we wskazanej warstwie na ekranie, będziesz musiał zdefiniować jego właściwość position (patrz listing 7.9).

<E1>	<- 0
<E2X/E2>	<- 1
</El>
<E3>	<- 1
</E3>
<E4>	<- 2
<E5>	<- 1
<E6X/E6>	<- 1
<E7X/E7>	<- 2
<E8X/E8>	<- 3
</E5>
<E9X/E9>	<- 2
</E4>
<E10x/E10>	<- 3

Rysunek 7.9. Naturalny porządek wyświetlania. Pierwszy’ element <EI> ma z-indeks o wartości 0. Kolejny element <E2>, zagnieżdżony wewnątrz elementu <EI>, otrzymuje z-indeks równy I. Z-indeks kolejnego elementu <E3> także będzie miał wartość I. jednak <E2> będzie poniżej tego elementu, gdyż jego element rodzicielski <EJ> ma z-indeks o wartości 0. Przechodząc dalej, także element <E6> ma z-indeks o wartości I. Jednak <E6> zostanie wyświetlony ponad wszystkimi poprzednimi elementami, ponieważ posiadają one z-indeks o wartości /, a najwyższy element rodzicielski elementu <E6> - <E4> - ma z-indeks o wartości 2

Rysunek 7.10. Wyniki wyświetlenia kodu z listingu 7.9. Zauważ, iż pomimo że Element I powinien znajdować się na samym spodzie stosu elementów, to jego właściwości z-indeks przypisano wartość 3, a zatem będzie on wyświetlony ponad pozostałymi elementami

130