Ett exempel p� hur du kan f� lager att vara �ver varandra visas
i detta exempel.
L�gg m�rke till att du p� ett 2 dimensionellt s�tt best�mmer
vart lagret ska vara med top (position fr�n sidans topp)
och left (position fr�n v�nster).
Exempel 3 - Bildposition
<DIV STYLE="position: absolute; top: 4px; left: 4px"><IMG SRC="bild1.gif"></DIV>
<DIV STYLE="position: absolute; top: 20px; left: 20px"><IMG SRC="bild2.gif"></DIV>
<DIV STYLE="position: absolute; top: 35px; left: 35px"><IMG SRC="bild3.gif"></DIV>
Dessa bilder ligger p� varandra, de ligger t.o.m. p� denna text.
Som du ser l�gger sig bilderna i den ordning som de skrivs in i koden,
dvs f�rst finns lager 1, sedan 2 och sedan 3.
Lager 1 ligger i v�rt exempel underst medan lager 3
ligger �verst. Skulle vi vilja byta ordning kan vi byta plats p� lager
1 och lager 3:
Exempel 4 - Bildposition, omv�nd ordning
<DIV STYLE="position: absolute; top: 35px; left: 35px"><IMG SRC="bild3.gif"></DIV>
<DIV STYLE="position: absolute; top: 20px; left: 20px"><IMG SRC="bild2.gif"></DIV>
<DIV STYLE="position: absolute; top: 4px; left: 4px"><IMG SRC="bild1.gif"></DIV>
Dessa bilder ligger p� varandra, de ligger t.o.m. p� denna text.
Man kan med z-index best�mma i vilken ordning olika lager ska ligga.
Du f�r h�r med en form av en tredje dimension.
Om ett lager som helt eller delvis ligger p� samma st�lle som ett annat lager hamnar
det ovanp� det andra lagret om z-index-v�rdet �r h�gre �n det andra lagret:
Exempel 5 - Bildplacering och z-index
<DIV STYLE="position: absolute; top: 4px; left: 4px; z-index: 10"><IMG SRC="bild1.gif"></DIV>
<DIV STYLE="position: absolute; top: 20px; left: 20px; z-index: 1"><IMG SRC="bild2.gif"></DIV>
<DIV STYLE="position: absolute; top: 35px; left: 35px; z-index: 27"><IMG SRC="bild3.gif"></DIV>
<BR><BR><BR><BR>
H�r spelar inte ordningen man skriver dem i n�gon roll.
H�r avg�r z-index i vilken ordning de ligger p� varandra.
Observera att du b�r ha med z-index p� alla lager (eller strunta i det helt) om dina lager
kan komma �ver varandra p� sidan eftersom Netscape och Explorer har olika regler om hur lager ska
visas om vissa lager har ett z-index-v�rde och andra lager inte har det och dessa
kommer p� samma plats p� sk�rmen.
N�r du skapar dina lager �r det inget krav att du skriver in alla attribut
i en STYLE-attribut i sj�lva DIV-taggen. Om du har m�nga lager blir det lite
mer strukturerat skrivet om du har alla attribut i en STYLE-tagg i sidans HEAD.
Du m�ste d� ocks� namnge lagren med en ID-attribut i DIV-taggen.
ID-attribut �r �ven n�dv�ndiga d� man med JavaScript ska utf�ra
olika saker med lagren.
F�rra exemplet fast p� det nya s�ttet blir:
Exempel 6 - Bildplacering och z-index, s�tt 2HEAD:
<STYLE TYPE="text/css">
<!--
#bild1 {position: absolute; top: 4px; left: 4px; z-index: 10}
#bild2 {position: absolute; top: 20px; left: 20px; z-index: 1}
#bild3 {position: absolute; top: 35px; left: 35px; z-index: 27}
//-->
</STYLE>
BODY:
<DIV ID="bild1"><IMG SRC="bild1.gif"></DIV>
<DIV ID="bild2"><IMG SRC="bild2.gif"></DIV>
<DIV ID="bild3"><IMG SRC="bild3.gif"></DIV>
<BR><BR><BR><BR>
H�r spelar inte ordningen man skriver dem i n�gon roll.
H�r avg�r z-index i vilken ordning de ligger p� varandra.
Observera att Netscape inte accepterar namn som inneh�ller liggande streck (_)
som lagernamn. Ange allts� aldrig lager som heter t.ex: lagrets_namn.
Detta kommer inte att fungera f�r Netscape.
T�nk f�r�vrigt p� att du kan ange alla attributen f�r ett lager i STYLE-taggen,
eller bara n�gra om du s� vill. Dvs du kan ha en sida med n�gra
lager med alla attribut i en STYLE-attribut (i DIV), n�gra lager
med alla sina attribut i STYLE-taggen (i HEAD) och n�gra andra
lager med n�gra attribut i STYLE-attributen och n�gra i STYLE-taggen.
