Till Startsidan
JavaScript.nu hostas av Ballou.se

Skaffa webbhotell
Från 12 kr/månad.

100 kr rabatt för JavaScript.nu-
besökare.

JavaScript.nu / DHTML-kurs / Bildposition, z-index & STYLE-tagg

LÄR DIG DHTML
Bildposition, z-index & STYLE-tagg

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 2
HEAD:
<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.


[DHTML guiden] - [Till kapitel 3]






Copyright © Omid Rouhani 1997-2010; Alla rättigheter reserverade.
Guider: [ HTML guide ] - [ JavaScript guide ] - [ DHTML guide ] - [ Perl guide ] - [ Sitemap ]