Maximalt z-index. Egenskapen z-index kan ställas in på negativa värden. Naturligt arrangemang av element

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 alla placerade helt till vänster överkant dokument på ett sådant sätt att det lite överlappar nästa. Den första har ett z-index lika med 1, de andra två har inget z-index.

Nedan finns 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 genomskinlighet till den första (föräldern till röd).
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 för ö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, du kommer 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 att uttryckligen given egendom positionering. (När jag säger "ange uttryckligen positionering", 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 bara 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 för att förstå z-index och staplingsordning för element.

Varje överlagringskontext har sitt eget rotelement vid 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

Från författaren: välkommen till vår serie CSS-lektioner från A till Ö! I den här serien kommer jag att berätta om CSS-värden och egenskaper som börjar med olika bokstäver i alfabetet. Ibland räcker det inte med en instruktionsvideo, och i den här artikeln ska jag ge dig ett par snabba tips om att arbeta med egenskapen z-index.

Den fullständiga videohandledningen och dess textversion på z-index-egenskapen kan ses på länken.

Z står för z-index

Som du kanske förväntar dig kommer den sista artikeln i serien helt att ägnas åt z-index-egenskapen.

Som nämnts i videohandledningen styr egenskapen z-index ordningen på lagren i ett dokument. Det finns flera komplexa problem förknippade med stackkontexten, som diskuterades i videohandledningen, men i allmänhet har z-index-egenskapen ganska begränsad funktionalitet.

z-index fungerar bara på positionerade element

Om du behöver ändra ordningen på lager på element kan du göra detta med hjälp av egenskapen z-index. dock denna fastighet fungerar bara med element som har sin positionsegenskap inställd på absolut, relativ eller fix.

Exakt positionering av element är viktigt när man skapar komplexa layouter och intressanta gränssnittsmönster, men vi vill alla kunna ändra ordningen på lagren utan att behöva flytta ett element från dess ursprungliga position på sidan.

Om du bara behöver ändra ordningen på lagren kan du helt enkelt ställa in positionsegenskapen till relativ och utelämna topp, höger, botten eller vänster. Elementet kommer att förbli på sin plats, strukturen i dokumentet kommer inte att störas och z-index-egenskapen kommer att fungera som den ska.

Du kan ange negativa värden i egenskapen z-index

Lager används ofta för att skapa komplexa geometriska former eller UI-komponenter. Denna skiktning involverar arrangemanget av element ovanför varandra med konstant ökning z-indexvärden. För att flytta ett element ner en nivå, ange helt enkelt ett lägre z-indexvärde, men den här egenskapen accepterar även negativa värden.

Negativa värden kan användas med pseudoelement för att placera dem bakom det överordnade elementets innehåll.

För att placera :before eller after pseudo-elementen under det överordnade elementets text måste du ange ett negativt värde. Så här fungerar stacken.

Ta en titt på CodePen-demon nedan att leka med olika betydelser z-index.

Använd 100 som inkrement för z-index

När man arbetar med z-index är det inte vanligt att skriva kod så här:

Modal (z-index: 99999; )

Modal ( z-index: 99999;

Det gör ont i mig att titta på den här koden. Saker och ting blir ännu värre när du lägger till!viktigt. Kod som denna är ett tecken på att utvecklaren inte förstår sammanhanget för stacken och försöker tvinga ett lager ovanpå ett annat.

Istället för att använda godtyckliga tal som 9999, 53 eller 12 kan vi systematisera vår z-indexskala och ställa den i ordning. Och det är inte för att jag är en utvecklare med tvångssyndrom. Ärligt.

Som ett steg för z-index använder jag inte ett ensiffrigt nummer, utan 100.

Lager-ett (z-index: 100;).lager-två (z-index: 200;).lager-tre (z-index: 300;)

Detta manuella tillvägagångssätt för att skapa ett z-index-system är mycket robust, men det kan bli ännu mer flexibelt när det paras ihop med en förprocessor som Sass. Det är allt, vänner. Detta var den sista artikeln i CSS A till Ö-serien! Vi hoppas att du tyckte om det och lärde dig mycket om CSS-egenskaper.

Majoritet CSS-egenskaper lätt att förstå. Ofta ger det omedelbara resultat att applicera någon av dem på ett uppmärkningselement - du behöver bara uppdatera sidan och du kan se effekten av programmet. Det finns dock vissa egenskaper som är mer komplexa och fungerar bara under vissa omständigheter.

Egenskapen z-index tillhör den andra gruppen, vilket utan tvekan orsakar mer förvirring än någon annan. Ironiskt nog, men med en full förståelse för vad z-index är, är det väldigt lätt att använda och är det ofta effektivt sättövervinna många layoutproblem.

I den här artikeln kommer vi att titta på vad z-index är, vilka problem det finns med att förstå det och även diskutera några exempel på dess användning. Vi kommer också att överväga skillnaden i hur webbläsare bearbetar det, särskilt i tidigare versioner Internet Explorer och FireFox.

Så vad är denna egenskap?

Egenskapen z-index bestämmer placeringsnivån i stacken, djupet på html-elementet. "Djupnivå" betyder elementets position längs Z-axeln (i vinkelrät mot skärmens X- och Y-axlar). Ju högre z-indexvärde, desto högre blir elementet.

Naturligt arrangemang av element

På en sida bestäms den normala placeringen av element (med vilket jag menar längs Z-axeln) av flera faktorer. Nedan finns en lista över dessa faktorer, som börjar med de lägsta elementen. Denna lista förutsätter att inget element uttryckligen tilldelas en z-index-egenskap.

1. Bakgrunden och gränserna för elementet som definierar stackkontexten.
2. Element med negativ stackkontext, i visningsordning.
3. Icke-positionerad (position: statisk), såväl som utan float-egenskapsuppsättningen (float: ingen) blockelement(display: block), i displayordning.
4. Opositionerade blockelement med flytande egenskaper, i visningsordning.
5. Inline-element, i visningsordning.
6. Element med positionsegenskapsuppsättningen, i visningsordning.

Korrekt användning av z-index-egenskapen kan ändra den naturliga stackpositionen.

Naturligtvis är ordningen på elementen i en stack inte uppenbar förrän du behöver visa elementen ovanför varandra. Därför, för att se den normala ordningen av element, använder exemplet nedan negativa marginaler.

Dessa element olika färger bakgrund och kanter, och de två sista flyttas på grund av inställningen negativ marginalegenskaper. På så sätt kan du se den naturliga placeringen av element, varje nästa är "över" det föregående. Dessa element har ingen z-index-egenskapsuppsättning, och deras staplingsordning är naturlig.

Var kan problemen finnas?

Låt oss titta på det mest populära problemet bland nybörjare. Saken är att z-index-egenskapen bara fungerar på element som har positionsegenskapen inställd på absolut , fix eller relativ .

För att demonstrera detta, låt oss visa samma tre element, men med z-index-egenskapen inställd för att försöka ändra ordningen längs Z-axeln.

Låt oss ställa in det grå elementets z-index till 9999, det blå elementet till 500 och det bruna elementet till 1. Det är logiskt att förvänta sig att ordningen ändras. Men inte i det här fallet, eftersom positionsegenskapen är statisk som standard.

Låt oss ställa in positionsegenskapen till relativ och se vad som händer:

Men nu har vi det förväntade resultatet. Ordningen på elementen har ändrats, det grå elementet är ovanpå alla och det bruna är längst ner.

Syntax

Egenskapen z-index påverkar både blockelement och inline-element. Värdet kan vara positivt eller ett negativt tal, eller så är standardvärdet auto. Standardvärdet betyder att elementet är på samma nivå som dess överordnade.

Nedan är CSS för det tredje exemplet, där z-index-egenskapen tillämpas korrekt:

#grey_box ( bredd: 200px; höjd: 200px; kant: fast 1px #ccc; bakgrund: #ddd; position: relativ; z-index: 9999; ) #blue_box (bredd: 200px; höjd: 200px; kant: fast 1px # 4a7497; bakgrund: #8daac3 position: relativ; z-index: 1;

Än en gång, särskilt för de som är nya i CSS, kommer inte z-index-egenskapen att fungera om du inte ställer in positionsegenskapen.

Använd i javascript

Du kan påverka z-index-egenskapen dynamiskt med javaScript. Syntaxen liknar den för de flesta CSS-egenskaper, med kamelnotation för att ersätta bindestrecket i CSS-egenskaper.

Var myElement = document.getElementById("gold_box"); myElement.style.position = "relativ"; myElement.style.zIndex = "9999";

Felaktig implementering i IE och FireFox

I vissa fall, i IE6, IE7 och FireFox 2, är det en felaktig implementering av z-index-egenskapen.

Välj element i IE6

I Internet Explorer 6 är select-elementet en Windows-kontroll, av denna anledning visas det alltid ovanpå alla element, och ignorerar den normala placeringsordningen samt egenskaperna för position och z-index. Problemet visas på bilden nedan:

Select-elementet är det första elementet i dokumentet, dess z-index-egenskap är inställd på 1 och dess position är inställd på relativ . div visas efter valet och dess z-index är "9999". Baserat på allt detta bör div:en placeras ovanför select , som det händer i andra webbläsare:

Välj år - 2009 2010 2011

Om du inte läser den här artikeln i IE6 kommer du att se att div är placerad ovanför select .

Detta IE6-fel är stort problem för rullgardinsmenyer, när de ska överlappa markeringselementet. Lösningen kan vara använder javascript för att tillfälligt dölja valen och sedan, efter att menyn försvinner, visa den igen. En annan lösning kan vara att använda en iframe.

Positionerade föräldrar i IE6/IE7

Internet Explorer-versioner 6 och 7 återställer felaktigt stackkontexten med avseende på den närmast placerade föräldern. För att visa detta fel kommer vi återigen att visa två divs. Men den här gången lindar vi in ​​den första i ett placerat element.

Det grå elementet har ett z-index på 9999, det blå elementet har ett z-index på 1, båda elementen är placerade. Därför, om det implementeras korrekt, kommer det grå elementet att visas ovanpå det blå.

Om du öppnar den här sidan i IE6 eller IE7 kommer du att se att det blå elementet överlappar det gråa. Detta händer eftersom det grå elementet är inlindat i en annan div vars position är inställd på relativ .

Båda webbläsarna "återställer" stackkontext på relativt placerade element, även om de inte borde. Det grå elementet har ett högre z-index än det blå elementet, så det bör synas högre. Det finns inga sådana problem med andra webbläsare.

Negativa värden i FireFox 2

I FireFox 2 är element med negativt z-index under staplingskontexten, istället för att vara ovanför bakgrunden och gränserna för elementet som bildar staplingskontexten. Du kan se ett exempel på bilden:

Nedan finns html-versionen

Som du kan se är bakgrunden för det grå elementet (som bildar stackkontexten) under det blå, och texten (som är det inline-elementet i det grå elementet) är ovanför det, enligt de naturliga layoutreglerna som beskrivs ovan.

Exempel på användning

Den ursprungliga artikeln ger många exempel på användning av fastigheten. Ärligt talat, jag är för lat för att översätta detta, i grund och botten är det en skärmdump, en liten kommentar och en länk. Om du verkligen behöver det, skriv då, jag ska hinna med det.

Den rosa fyrkanten har ett annat z-indexvärde än auto, vilket skapar en ny överlagringskontext. Utseendet på en överlagringskontext påverkar hur underordnade element renderas.

Du kan ändra staplingsordningen för den rosa fyrkantens barn. Men deras z-index är bara vettigt i sammanhanget av en överlagring. Det betyder att vi inte kommer att kunna placera den orangea fyrkanten framför den blå eftersom de finns i olika överlagringssammanhang.

Om vi ​​vill att de blå och orangea rutorna ska vara en del av samma överlagringssammanhang kan vi göra den blå rutan till ett barn till den rosa rutan. Detta kommer att flytta den blå fyrkanten bakom den orange.

https://codepen.io/ivhed/pen/erGoJE

Överlagringskontexten skapas inte bara genom att använda egenskapen z-index. Det finns flera andra egenskaper som gör att element skapar överlagringskontexter. Några exempel: filter, opacitet och transformation.

Låt oss återgå till vårt tidigare exempel. Den blå fyrkanten är återigen kopplad till den rosa. Den här gången, istället för att lägga till en z-index-egenskap till den rosa kvadraten, kommer vi att tillämpa ett filter på den.

Blå, .rosa, .orange (
position: absolut;
) .rosa (
filter: nyans-rotera (20 grader);
) .blå (
z-index: 2;
) .orange (
z-index: 3;
) .grön (
z-index: 100;
}

https://codepen.io/ivhed/pen/LmWMQb

Den orange torget har fortfarande mer hög z-poängän blå, men fortfarande visas bakom den. Detta beror på att filtervärdet fick den rosa fyrkanten att skapa en ny överlagringskontext.

Sammanfattning

Genom att använda z-index på positionerade element kan vi ändra standardstaplingsordningen för element.

När vissa CSS-egenskaper tillämpas kan ett element bilda en överlagringskontext. Z-indexvärden är bara meningsfulla i samma överlagringssammanhang.

För att få ytterligare information om hur z-index-egenskapen fungerar rekommenderar jag att du läser den här artikeln. Det var hon som inspirerade mig när jag arbetade med den här publikationen.

Den här artikeln kommer att prata om hur man tar med ett lager eller element i förgrunden/bakgrunden i HTML med CSS. Mer exakt, med hjälp av egenskapen z-index.

Mest troligt gjorde var och en av er applikationer som barn. Det här är en process där man limmar olika element ovanpå ett papper - hus, träd, moln och så vidare. Det visar sig ungefär som en 3D-bild, där varje element, sedan bara ett lager, klistras ovanpå det andra. Alla är limmade på ett pappersark.

HTML med använder CSS låter dig få en liknande bild, bara på en webbsida. Vart och ett av elementen kan limmas ovanpå de andra om det behövs.

När kan detta behövas? Om du gillar att spela med position och position i förhållande till skärmen kan du sluta med att ett element överlappar ett annat, men du måste föra det stängda elementet fram. Ofta, utan att definiera elementen i bakgrunden/förgrunden, är det svårt att implementera den eller den saken från en design som inte har skapats av en programmerare utan av en designer. I allmänhet är omfattningen av denna fastighet mycket bred och begränsas endast av din fantasi.

Det första att komma ihåg är att z-index inte fungerar om inte elementet har en positionsegenskap inställd på absolut , relativ eller fix . Detta är fallet, eftersom du kommer att behöva överlappa och därför placera dem på olika lagernivåer, bara om du börjar överlappa ett element med ett annat på grund av position och botten , topp , vänster , höger . Men detta är inte det enda fallet där z-indexplacering kan vara nödvändig. Element kan överlappa varandra med negativa marginalvärden och andra metoder.

Om du inte anger z-index, är det standard till 0 för alla element. z-index kan ta både positiva och negativa heltalsvärden. När det gäller standardvärdet kommer elementen att överlappa varandra enligt det faktum att ju längre elementet skrivs i koden, desto mer blir det förgrund(Exempel nr 1 i Demo).

Så här kan CSS-stilkoden för 3 se ut: