|
|||
Cgi4free |
Egen söktjänst |
Erbjudanden |
Funktioner |
Gratis bilder |
Hemsidekryptering |
Posten |
Söktjänstregistrering |
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:
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:
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:
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. Copyright © Omid Rouhani 1997-2022; Alla rättigheter reserverade. Guider: [ HTML guide ] - [ JavaScript guide ] - [ DHTML guide ] - [ Perl guide ] - [ Sitemap ] |