Share
De z-index egendom i CSS verkar enkelt nog, men det finns mycket att upptäcka under ytan om du verkligen vill förstå hur det fungerar. I denna handledning kommer vi att klargöra z-indexets inre funktion, genom att titta på stapla sammanhang och några praktiska exempel.
CSS tillhandahåller tre olika positioneringsscheman för layout av lådor:
Den sistnämnda tar helt bort ett element från det normala flödet och bygger på utvecklaren för att berätta om elementet där man ska visa.
Du ger det högsta, vänstra, nedre och rättvärdet för att placera elementet i tvådimensionellt utrymme, men CSS låter dig också placera den i den tredje dimensionen med z-indexegenskapen.
På ytan verkar z-index som en lätt egenskap att använda. Du anger värden för att bestämma var på denna tredje axeln elementet kommer att vara beläget, och du är klar. Under ytan finns det mycket mer att dyka in, inklusive ett antal regler för vilka typer av element som sitter ovanpå andra.
Låt oss börja med grunderna för att se till att vi är alla på samma sida och då pratar vi om stapling för att förstå mer av vad som händer med z-index bakom kulisserna.
Jag är säker på att du är bekant med tredimensionellt koordinatutrymme. Vi har en x-axel som vanligtvis används för att representera den horisontella, en y-axel för att representera vertikal och en z-axel som används för att representera vad som händer in och ut ur sidan, eller skärmen i vårt fall.
Vi gör inte bokstavligen se z-axeln, eftersom skärmen är ett tvådimensionellt plan. Vi ser det i form av perspektiv och av vissa element som förekommer framför eller bakom andra element när de delar samma tvådimensionella rymd.
För att bestämma var längs den tredje axeln finns ett element, tillåter CSS oss att ställa in tre värden på z-indexegenskapen.
För tillfället låt oss fokusera på heltalets värde. Detta kan vara positivt, negativt eller 0. Ju större värdet desto närmare betraktaren kommer elementet att visas. Ju lägre värdet desto längre bort visas det.
Om två element är placerade så de båda upptar ett delat område av tvådimensionellt utrymme, kommer elementet med det större z-indexet att dölja eller inkludera elementet med det lägre z-indexet i de områden där de delar utrymmet.
Jag antar att det ovanstående är lätt att förstå och troligtvis beter sig som du förväntar dig. Det finns emellertid några obesvarade frågor som hänger ihop.
För att kunna svara på dessa frågor behöver vi förstå mer om hur z-index fungerar, särskilt idén om att stapla sammanhang, stapla nivåer och stapla order.
Stapelkonflikter och staplingsnivåer kan vara lite svåra att konceptualisera, så för ett ögonblick, bild ett bord med en massa saker som sitter ovanpå den. Tabellen representerar ett staplingskontext. Om det finns ett andra bord bredvid det första, representerar det ett annat staplingskontext.
Tänk nu på den första tabellen finns det fyra små kvarter, alla sitter direkt på bordet. Ovanpå dessa fyra kvarter finns en glasplåt och på toppen av glasplattan finns en skål med frukt. Blocken, glasplattan och fruktskålen representerar var och en en annan staplingsnivå inom staplingskontextet som är bordet.
Ett enda standard staplingskontext skapas för varje webbsida. Roten till detta sammanhang (tabellen) är html element. Allt inne i HTML-taggen sitter på en staplingsnivå inom detta standard stacking-sammanhang (objekt sitter på bordet).
När du tilldelar ett z-indexvärde annat än auto till ett element skapar du ett nytt stablingskontext med nya staplingsnivåer som är oberoende av andra stablingssammanhang och staplingsnivåer på sidan. Du tar med dig ett annat bord i rummet för att föremål ska sitta på.
Det enklaste sättet att förstå stackningsordningen är med ett enkelt exempel, så enkelt kommer vi inte ens överväga positionerade element för ett ögonblick.
Tänk på en mycket enkel webbsida. Annat än standardvärdet Vad förväntar du dig att se när du laddar sidan? Förhoppningsvis tog det dig inte lång tid att bilda en mestadels blå skärm med undantag av ett block av röd färg som har de mått du ställt för bredden och höjden på div. Det röda blocket är förmodligen längst upp till vänster om du inte låter fantasin springa lite och gav det mer css att visa den någon annanstans. Du kanske tänker "så vad, det var ganska uppenbart", men vad som kanske inte är så uppenbart är varför du ser ett rött block ovanpå en blå bakgrund. Varför ser du diven ovanpå html-elementet? Anledningen är att båda följer stavningsorderregler. I det här enkla exemplet säger reglerna att nedstigningsblock i normalflödet (div) sitter på en högre nivå än bakgrunderna och gränserna för rotelementet (html-elementet). Du ser div på toppen eftersom den ligger på en högre staplingsnivå. Medan exemplet ovan bara innehåller en stapel med två nivåer finns det sju möjliga nivåer på varje staplingskontext som anges nedan. Dessa sju nivåer utgör reglerna för staplingsordning. Ett element på nivå sju kommer att visas ovanför (närmare tittaren) än element på nivå ett till sex. Ett element på nivå fem visar över ett element på nivå två. Ett element på ... ja du får idén. Första gången jag stött på reglerna om staplingsordning ovan stod några saker ut mot mig. Om du bara tittar på nivåerna två, sex och sju (de där z-index nämns) passar det vad du antagligen antar om z-index. Positivt z-index ligger på en högre nivå än 0 z-index, som ligger på en högre nivå än negativt z-index. Det är förmodligen där de flesta av oss slutar tänka på alla dessa staplingslager. Innan dessa regler hade jag antagit att allt annat motsvarade ett z-index på 0. Det är klart det inte. Faktum är att allting sitter på en nivå under z-index = 0-nivån. Vad som också är intressant är att icke-positionerade element finns på fyra olika staplingsnivåer. Det är vettigt när du tänker på det. Om alla icke positionerade element var på samma staplingsnivå så skulle vi inte se text (inline-box) ovanpå en div (block level box). Ett par gånger har jag nämnt att skapa nya stablingssammanhang. När du tilldelar ett z-indexvärde annat än Låt oss tänka igen på tabeller som staplar sammanhang. Innan vi hade ett bord och ovanpå bordet var fyra kvarter, en tallrik med glas och en fruktskål. Föreställ dig det andra bordet vi introducerade har också fyra block av samma storlek och en glasplåt på toppen men ingen fruktskål. Du kan förvänta dig att fruktskålen från bordet 1 är den högsta föremålet i rummet. Den sitter på högsta nivå (den har det största z-indexet). Vad skulle hända om vi flyttade bordet ett och allt på toppen av det till källaren? Den fruktskålen skulle nu vara lägre än allt på bordet två, för att bordet självt har flyttats till en nivå under tabell två. Samma sak händer med positionerade element på en webbsida. Överväg markeringen och styling nedan. Kommer HTML: CSS: Även om div.two har det större z-indexet (100), sitter det faktiskt under div.four (z-index = 50) på sidan. Du kan se resultatet av koden ovan i bilden nedan. De svarta och gula gränserna visar de olika staplingskontexten som varje element är i. Eftersom div.two finns i div.one är dess z-index relativt Vad vi har gjort flyttas Om du är som jag, har det förmodligen uppstått dig en eller två gånger när du arbetar med z-index. Förhoppningsvis hjälper dessa exempel till att klargöra varför ett element med ett större z-index ibland hamnar bakom ett annat element med ett lägre z-index. När du först stöter på det, ser z-index-fastigheten ut som en mycket enkel egenskap att förstå. Värden representerar en plats på en axel in i och ut ur skärmen, och det är allt. En djupare titt på z-index avslöjar att det finns lite mer på väg bakom kulisserna. Det finns stablande kontekster, staplingsnivåer och regler för att bestämma vilket element som visas högre eller lägre i staplingsordningen. Positionerade element kan skapa nya stablingskontexter, och hela staplingsnivåerna kommer att visas över eller under alla nivåer i ett annat staplingskontext., , , etc. hittar du på varje webbsida finns en singel
De sju nivåerna i ett staplingskontext
Få alltid att falla på plats
bil till ett element skapar du ett nytt stablingskontext oberoende av andra stablingssammanhang.div.two visa ovan eller under div.four?div bredd: 200px; höjd: 200px; vaddering: 20px; .one, .two, .three, .four position: absolute; .on bakgrund: # f00; kontur: 5px fast # 000; topp: 100px; vänster: 200px; z-index: 10; .two bakgrund: # 0f0; kontur: 5px fast # 000; topp: 50px; vänster: 75px; z-index: 100; . tre bakgrund: # 0ff; kontur: 5px fast # 000; topp: 125px; vänster: 25px; z-index: 150; .four background: # 00f; kontur: 5px fast # ff0; topp: 200px; vänster: 350px; z-index: 50;
div.ones stack. I själva verket är vad vi verkligen har följande:
div.one och allt det innehåller nedan div.four. Oavsett vilka värden vi satt på z-indexegenskapen av element inuti div.one de kommer alltid att visas nedan div.four.
Slutsats
Vidare läsning
Accentsconagua