DHTML0128

Umiejscawianie w CSS

Listing 7.9. W tym przykładzie definiujemy cztery identyfikatory. elementO do elementi, które zostaną użyte do umiejscowienia obrazków na ekranie, '/.-indeksy zostały zdefiniowane w taki sposób, że elementy umieszczone niżej i bardziej na prawo będą wyświetlone wyżej niż elementy umieszczone wyżej i bardziej na lewo

<htral>

<head>

<met a h 11 p-e qu i v -" Con t e nt-Type" ->-cont:ent-^,,text/hcinl; charset'-ISO-8859~2"> <title>Listing 7.9</title>

#elementl { position: absolute; z-index: ->3; top: I75px; left: 225pz }

#element2 ( position: absolute; z-index:

>2; top: 100px; left: 140px }

#element3 { position: absolute; z-index: -►1; top: 65px; left: S5px }

#element4 { position: absolute; z-i.ndex: -»0; top: 5px; .left: 5px }

</style>

</head>

cbody bgcolor *"łfFFFFFF">

<IMG SRC=" ../images/rysl .gif " width="lS0^,rheight-"126"xbr ciear="all">Element l</span> <span id“"element?^ł,>

<1MG SRC=" . . /images/rys2 . gi f " v/idt.h="150" height="126'^,><br clear="ali">Eleisent 2</span> <span id-'^,ele^ent3^,,>

<IMG SRC='*. ./images/rys4 .gi f" width-"120" heięht="126"xbr elear "a- l.">Element 4</span> </body>

3. z-index:

Podaj właściwość z-index i dwukropek.

4. 0

Teraz podaj numer, dodatni lub ujemny, może to być także 0. Numer ten określa z-indeks elementu w stosunku do innych elementów zagnieżdżonych na tym samym poziomie, przy czym wartość 0 określa, że element będzie wyświetlany na tym samym poziomie. Jeśli chcesz, aby przeglądarka sama określiła z-indeks elementu, to podaj auto.

5. ; top: 5px; left:5px;}

Zamknij definicję średnikiem i zakończ regułę zamykającym nawiasem klamrowym.

S Rady

■ Użycie liczby ujemnej jako wartości z-indeksu spowoduje, że element zostanie wyświetlony o podaną ilość warstw poniżej swojego elementu rodzicielskiego, a nie powyżej niego.

Jeśli dwa elementy o tej samej wartości z-indeksu zajmują ten sam obszar, to na wierzchu zostanie wyświetlony ten z nich, którego element rodzicielski najwyższego poziomu jest podany jako ostatni,

Rysunek 7. / /. Ten sam dokument, w którym jednak nie ustawialiśmy wartości z-indeksów. lecz pozwoliliśmy, aby zostały one określone przez przeglądarkę w naturalnym porządku. Zauważ, że teraz Element I jest wyświetlany poniżej wszystkich pozostałych elementów, gdyż jego naturalny z-indeks ma wartość 0

Definiowanie porzqdku wyświetlania

131