Beskrivning
Alla placerade element på en webbsida kan staplas ovanpå varandra i en specifik ordning och därigenom simulera en tredje dimension vinkelrätt mot skärmen. Varje element kan vara antingen under eller ovanför andra objekt på webbsidan, deras placering längs z-axeln styrs av z-index . Den här egenskapen fungerar bara för element vars positionsvärde är absolut, fast eller relativt.
Syntax
z-index: nummer | auto | ärva
Värderingar
Heltal (positiva, negativa och noll) används som värden. Ju högre värde, desto högre är elementet jämfört med de element som har ett lägre värde. Om z-indexvärdet är lika är elementet i förgrunden det som beskrivs nedan i HTML-koden. Även om specifikationen tillåter användning av negativa z-indexvärden, visas inte sådana element i Firefox webbläsare upp till version 2.0 inklusive.
Förutom numeriska värden används auto - ordningen på element byggs i det här fallet automatiskt, baserat på deras position i HTML-koden och deras tillhörighet till föräldern, eftersom underordnade element har samma nummer som deras överordnade element. Arvvärdet indikerar att det ärvt från föräldern.
HTML5 CSS2.1 IE Cr Op Sa Fx
Lager 1 ovanpå
Lager 4 ovanpå
Resultatet av detta exempel visas i fig. 1.
Ris. 1. Använda egenskapen z-index
Objektmodell
document.getElementById("elementID ").style.zIndex
Webbläsare
Lista skapad med tagg
Internet Explorer-versioner upp till och inklusive 7.0 stöder inte ärvningsvärdet och tolkar auto som 0.
I webbläsarversioner av Firefox upp till och med 2.0, placerar ett negativt z-index-värde elementet under bakgrunden på webbsidan och dess innehåll.
Alla placerade element på en webbsida kan staplas ovanpå varandra i en specifik ordning och därigenom simulera en tredje dimension vinkelrätt mot skärmen. Varje element kan vara antingen under eller ovanför andra objekt på webbsidan, deras placering längs z-axeln styrs av z-index . Den här egenskapen fungerar bara för element vars positionsvärde är absolut, fast eller relativt.
Kort information
Beteckningar
| Beskrivning | Exempel | |
|---|---|---|
| <тип> | Indikerar typen av värdet. | <размер> |
| A && B | Värdena måste matas ut i angiven ordning. | <размер> && <цвет> |
| A | B | Indikerar att du bara behöver välja ett värde från de föreslagna (A eller B). | normal | små kepsar |
| A || B | Varje värde kan användas självständigt eller tillsammans med andra i valfri ordning. | bredd || räkna |
| Grupper värderingar. | [ beskära || kors ] | |
| * | Upprepa noll eller fler gånger. | [,<время>]* |
| + | Upprepa en eller flera gånger. | <число>+ |
| ? | Den angivna typen, ordet eller gruppen är valfri. | infälld? |
| (A, B) | Upprepa minst A, men inte mer än B gånger. | <радиус>{1,4} |
| # | Upprepa en eller flera gånger åtskilda med kommatecken. | <время># |
Värderingar
Heltal (positiva, negativa och noll) används som värden. Ju högre värde, desto högre är elementet jämfört med de element som har ett lägre värde. Om z-indexvärdet är lika är elementet i förgrunden det som beskrivs nedan i HTML-koden. Det är acceptabelt att använda ett negativt värde.
Förutom numeriska värden används auto - ordningen på element byggs i det här fallet automatiskt, baserat på deras position i HTML-koden och deras tillhörighet till föräldern, eftersom underordnade element har samma nummer som deras överordnade element.
Exempel
I i detta exempel När du håller markören över kartan kommer den till framkanten och delvis överlappar resten av bilderna (Fig. 1).
Ris. 1. Ändra ordningen på korten
Objektmodell
Objekt.style.zIndex
Notera
Lista skapad med
Internet Explorer-versioner upp till och med 7.0 tolkar auto som 0.
I webbläsarversioner av Firefox upp till och med 2.0, placerar ett negativt z-index-värde elementet under bakgrunden på webbsidan och dess innehåll.
Specifikation
Varje specifikation går igenom flera stadier av godkännande.
- Rekommendation - Specifikationen har godkänts av W3C och rekommenderas som standard.
- Kandidatrekommendation ( Möjlig rekommendation) - gruppen som ansvarar för standarden är övertygad om att den uppfyller sina mål, men kräver hjälp från utvecklingsgemenskapen för att implementera standarden.
- Föreslagen rekommendation Föreslagen rekommendation) - i detta skede skickas dokumentet till W3C:s rådgivande råd för slutgiltigt godkännande.
- Working Draft - En mer mogen version av ett utkast som har diskuterats och ändrats för granskning av samhället.
- Redaktörens utkast ( Redaktionellt utkast) - ett utkast till standarden efter ändringar som gjorts av projektredaktörerna.
- Utkast ( Utkast till specifikation) - det första utkastet till standarden.
De z-index CSS-egenskapen ställer in z-ordningen för ett placerat element och dess avkomlingar eller flexobjekt. Överlappande element med ett större z-index täcker de med ett mindre.
Källan för detta interaktiva exempel lagras i ett GitHub-förråd. Om du vill bidra till projektet med interaktiva exempel, vänligen klona https://github.com/mdn/interactive-examples och skicka oss en pull-förfrågan.
För en positionerad ruta (det vill säga en med någon annan position än statisk), anger egenskapen z-index:
- Stacknivån för lådan i det aktuella staplingssammanhanget.
- Huruvida lådan etablerar ett lokalt staplingssammanhang.
Syntax
/* Nyckelordsvärde */ z-index: auto; /*Egenskapen z-index anges som antingen nyckelordet eller en .
Värderingar
bil Lådan etablerar inte en ny lokal staplingskontext. Stacknivån för den genererade boxen i det aktuella staplingssammanhanget är densamma som dess förälders box.Formell syntax
auto CSS-datatyp är en speciell typ avExempel
HTML
CSS
.streckad-box (position: relativ; z-index: 1; kant: streckad; höjd: 8em; marginal-botten: 1em; margin-top: 2em; ) .gold-box (position: absolut; z-index: 3 ; /* sätt .gold-box ovanför .green-box */ bakgrund: bredd: 3em (position: absolut; z-index : 2; /* put .green-box; ovan .streckad-box */ bakgrund: ljusgrön vänster: 65% höjd: 7em;Resultat
Specifikationer
| Specifikation | Status | Kommentar |
|---|---|---|
| CSS-övergångar Definitionen av "animationsbeteende för z-index" i den specifikationen. |
Arbetsutkast | Definierar z-index som animerbart. |
| CSS nivå 2 (revision 1) Definitionen av "z-index" i den specifikationen. |
Rekommendation | Initial definition |
| Initialt värde | bil |
|---|---|
| Gäller | placerade element |
| Ärvt | inga |
| Media | visuell |
| Beräknat värde | som specificerats |
| Animationstyp | en CSS-datatyp interpoleras via heltalsdiskreta steg. Beräkningen görs som om de vore reella flyttalstal och det diskreta värdet erhålls med hjälp av golvfunktionen.">heltal |
| Kanonisk ordning | den unika icke-tvetydiga ordningen som definieras av den formella grammatiken |
| Skapar staplingskontext | ja |
Webbläsarkompatibilitet
Kompatibilitetstabellen på denna sida genereras från strukturerad data. Om du vill bidra till datan, kolla in https://github.com/mdn/browser-compat-data och skicka oss en pull-förfrågan.
Uppdatera kompatibilitetsdata på GitHub
| Skrivbord | Mobil | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Krom | Kant | Firefox | Internet Explorer | Opera | Safari | Android webbvy | Chrome för Android | Firefox för Android | Opera för Android | Safari på iOS | Samsung Internet | |
| z-index | Chrome Fullständigt stöd 1 | Edge Fullständigt stöd 12 | Firefox Fullständigt stöd 1 | IE Fullt stöd 4 | Opera Fullständigt stöd 4 | Safari Fullständigt stöd 1 | ||||||
| Negativa värden | Chrome Fullständigt stöd 1 | Edge Fullständigt stöd 12 | Firefox Fullt stöd 3 | IE Fullt stöd 4 | Opera Fullständigt stöd 4 | Safari Fullständigt stöd 1 | WebView Android Fullt stöd Ja | Chrome Android Fullt stöd Ja | Firefox Android Fullständigt stöd 4 | Opera Android Fullt stöd Ja | Safari iOS Fullständigt stöd Ja | Samsung Internet Android Fullt stöd Ja |
Dagens lektion, liksom gårdagens, kommer att berätta om positionering i CSS, samt en mycket intressant egenskap som kallas z-index.
Med den här egenskapen kan du placera textblock (och inte bara text) ovanpå varandra, samtidigt som du får något som liknar en 3D-effekt.
Den här lektionen kommer att vara mycket användbar för nybörjare inom webbdesign, eftersom vi förutom teoretisk information också kommer att titta på ett praktiskt exempel.
För tydlighetens skull, titta på de två bilderna nedan:
"Relativ positionering"
"Absolut positionering"
Som du kan se, med relativ positionering, placeras blocket med text i förhållande till stycket med text. När absolut - i förhållande till webbläsarfönstret.
Funktionen av den här egenskapen är lättast att förklara med en bild:
Elementet med ett högre värde kommer att placeras ovanför.
Låt oss nu ta en närmare titt på vår demo.
Skapande av det första blocket
Lager 1
#lager1 (
bakgrund: #707070;
färg:#fff;
position:släkting;
bredd:800px;
höjd:450px;
}
Med hjälp av stilar ger vi detta block relativ positionering. Tack vare detta kan vi placera ytterligare block inuti.
Skapar det andra blocket
I analogi med det första blocket skapar vi ett block. Detta block skiljer sig endast i sin identifierare (id="layer2").
Lager 2
Lorem Ipsum är helt enkelt dummy text av tryck och sättning
industri. Lorem Ipsum har varit branschens vanliga dummytext
ända sedan 1500-talet, då en okänd skrivare tog ett pentry av typ
och förvrängde den för att göra en typprovbok. Den har inte överlevt
bara fem århundraden, men också språnget till elektronisk sättning,
förblir i huvudsak oförändrade. Det blev populärt på 1960-talet
med lanseringen av Letraset-ark som innehåller Lorem Ipsum-passager,
och på senare tid med programvara för desktop publishing som Aldus
PageMaker inklusive versioner av Lorem Ipsum.
#lager2 (
bakgrund:#f9ad81;
färg:#fff;
position:absolut;
top:40px;
vänster:50px;
bredd:400px;
höjd:400px;
z-index:1;
}
Vi ger det andra blocket absolut positionering. Nu kommer han definitivt att vara inne i den första och kommer ingenstans. Dessutom definierar vi z-index-attributet (=1). Detta innebär att block nr 2 kommer att ligga ovanför det första.
Skapandet av det tredje blocket
Lager 3
Lorem Ipsum är helt enkelt dummy text av tryck och sättning
industri. Lorem Ipsum har varit branschens vanliga dummytext
ända sedan 1500-talet, då en okänd skrivare tog ett pentry av typ
och förvrängde den för att göra en typprovbok. Den har inte överlevt
bara fem århundraden, men också språnget till elektronisk sättning,
förblir i huvudsak oförändrade. Det blev populärt på 1960-talet
med lanseringen av Letraset-ark som innehåller Lorem Ipsum-passager,
och på senare tid med programvara för desktop publishing som Aldus
PageMaker inklusive versioner av Lorem Ipsum.
#lager3 (
bakgrund:#6dcff6;
färg:#fff;
position:absolut;
top:80px;
vänster:100px;
bredd:600px;
höjd:200px;
z-index:2;
}
I detta block är z-index = 2.
Du kan prova att byta blockindex och se resultatet.
Kom ihåg att ett element med ett lägre z-index alltid kommer att ligga under ett element med ett högre. Det vill säga, du kan ge block nr 1 ett index = 999, och block nr 2 - 1000. Resultatet blir detsamma.
Det var allt för idag! Tack för din uppmärksamhet!
Problemet med z-index är att många helt enkelt inte förstår hur det fungerar.
Allt som beskrivs nedan finns i W3C-specifikationen. Tyvärr läser inte alla den.
Beskrivning av problemet:
Så låt oss säga att vi har en HTML-kod som består av 3 element.Var och en av dem innehåller en i sig själv. Och var och en har i sin tur sin egen bakgrund: röd, grön respektive blå. Dessutom är var och en placerad helt i den övre vänstra kanten av dokumentet på ett sådant sätt att den något överlappar den bredvid. Den första har ett z-index lika med 1, de andra två har inget z-index.
Nedan är HTML-koden med grundläggande CSS-design.
.röd, .grön, .blå ( position: absolut; ) .röd ( bakgrund: röd; z-index: 1; ) .grön ( bakgrund: grön; ) .blå ( bakgrund: blå; )
Exempel på jsfiddle
Uppgift: se till att rött är bakom blått och grönt, utan att bryta mot någon av följande regler:
- Du kan inte ändra HTML-uppmärkning
- Du kan inte ändra/lägga till z-index till element
- Du kan inte ändra/lägga till positionering till element
Lösning:
Lösningen är att lägga till lite mindre än en opacitet till den första (föräldern till rött).Här är css som illustrerar detta:
div:första barn ( opacitet: .99; )
Hmm, något är fel här. Vad har transparens med det att göra? Hur kan det påverka ordningen på överlappande element? Tycker du detsamma? Välkommen till klubben!
Jag hoppas att allt kommer på plats i den andra delen av artikeln.
Ordningen på överliggande element:
Z-index verkar väldigt enkelt: ju högre värde, desto närmare kommer elementet oss, d.v.s. ett element med z-index 5 kommer att överlappa ett element med z-index 2, eller hur? Inte riktigt.Detta är z-indexproblemet. Allt verkar så uppenbart att de flesta utvecklare inte spenderar tillräckligt med tid på att studera den här frågan.
Vilket element som helst i HTML-dokument kan vara antingen i förgrunden eller i bakgrunden. Alla vet detta. Reglerna som definierar denna ordning beskrivs tydligt i specifikationen, men, som jag sa ovan, förstår inte alla dem fullt ut.
Om z-index och positioneringsegenskaper inte är explicit inställda är allt enkelt: staplingsordningen är lika med ordningen på elementen i HTML. (Det är faktiskt lite mer komplicerat än så, men så länge du inte använder negativa utfyllnadsvärden för att överlappa inline-element, kommer du inte att stöta på kantfall)
Om du uttryckligen anger positionering för element (och deras underordnade), kommer sådana element att överlappa element utan en explicit positioneringsegenskap. (När jag säger "specificera uttryckligen positioneringen", menar jag vilket värde som helst annat än statiskt, till exempel: absolut eller relativt).
Och slutligen fallet där z-indexet ges. Till att börja med är det naturligt att anta att element med ett stort z-index kommer att vara ovanför element med ett mindre z-index, och alla element med en z-indexuppsättning kommer att vara över ett element utan en z-indexuppsättning, men detta är inte fallet. För det första tas z-index endast med i beräkningen på explicit placerade element. Om du försöker ställa in z-index på ett icke-positionerat element kommer ingenting att hända. För det andra kan z-indexvärden skapa överlagringskontexter. Hmm, saker blev mycket mer komplicerade, eller hur?
Överlagringskontext
Element med gemensamma föräldrar som flyttar till förgrunden eller bakgrunden tillsammans kallas överlagringskontexten. Att förstå staplingskontexten är nyckeln till att förstå z-index och staplingsordning för element.Varje överlagringskontext har sitt eget rotelement i HTML-struktur. I det ögonblick som ett nytt sammanhang bildas på ett element, faller även alla underordnade element in i detta sammanhang och tar sin plats i överlagringsordningen. Om ett element är placerat längst ner i en överlagringskontext, finns det inget sätt i helvetet att det kan visas ovanför ett annat element i en angränsande överlagringskontext högre upp i hierarkin, även med ett z-index satt till en miljon.
Ett nytt sammanhang kan bildas i följande fall:
- Om elementet är rotelementet i dokumentet (element)
Om elementet inte är statiskt placerat och dess z-indexvärde inte är auto
Om elementet har mindre opacitet än 1