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.
