Share
De z-index property in CSS lijkt eenvoudig genoeg, maar er is veel te ontdekken onder de oppervlakte als je echt wilt weten hoe het werkt. In deze tutorial zullen we de innerlijke werking van de z-index verduidelijken door ernaar te kijken stapelcontexten en een paar praktische voorbeelden.
CSS biedt drie verschillende positioneringsschema's voor de lay-out van vakken:
De laatste verwijdert een element volledig uit de normale stroom en vertrouwt erop dat de ontwikkelaar het element vertelt waar het moet worden weergegeven.
Je geeft het de hoogste, linker, onderste en juiste waarden om het element in een tweedimensionale ruimte te positioneren, maar CSS stelt je ook in staat het in de derde dimensie te plaatsen met behulp van de eigenschap z-index.
Aan de oppervlakte lijkt z-index een makkelijke eigenschap om te gebruiken. U stelt waarden in om te bepalen waar op deze derde as het element zal worden gevonden en u bent klaar. Onder het oppervlak is er nog veel meer om in te duiken, inclusief een aantal regels voor welke soorten elementen bovenop anderen zitten.
Laten we beginnen met de basis om er zeker van te zijn dat we allemaal op dezelfde pagina staan en dan zullen we het hebben over stapelen om meer te begrijpen van wat er gaande is met de z-index achter de schermen.
Ik weet zeker dat je bekend bent met de driedimensionale coördinatenruimte. We hebben een x-as die meestal wordt gebruikt om de horizontaal weer te geven, een y-as om de verticaal weer te geven en een z-as die wordt gebruikt om weer te geven wat er in en uit de pagina gebeurt, of het scherm in ons geval.
Dat doen we niet letterlijk zien de z-as, omdat het scherm een tweedimensionaal vlak is. We zien het in de vorm van perspectief en van sommige elementen die voor of achter andere elementen verschijnen wanneer ze dezelfde tweedimensionale ruimte delen.
Om te bepalen waar langs deze derde as een element zich bevindt, stelt CSS ons in staat om drie waarden in te stellen op de eigenschap z-index.
Laten we ons nu concentreren op de gehele waarde. Dit kan positief, negatief of 0 zijn. Hoe groter de waarde, hoe dichter bij de kijker het element wordt weergegeven. Hoe lager de waarde, hoe verder weg deze wordt weergegeven.
Als twee elementen zo zijn geplaatst dat ze allebei een gedeeld gebied van een tweedimensionale ruimte innemen, zal het element met de grotere z-index het element met de laagste z-index verduisteren of occluderen in de gebieden waar ze de ruimte delen.
Ik ga ervan uit dat het bovenstaande eenvoudig genoeg is om te begrijpen en zich hoogstwaarschijnlijk precies gedraagt zoals je verwacht. Er hangen echter nog wat onbeantwoorde vragen rond.
Om deze vragen te beantwoorden, moeten we meer weten over hoe z-index werkt, met name het idee van het stapelen van contexten, het stapelen van niveaus en het stapelen van orders..
Het stapelen van contexten en stapelniveaus kan een beetje moeilijk te conceptualiseren zijn, dus beeld je een tafel af met een stapel items erbovenop. De tabel vertegenwoordigt een stapelcontext. Als er een tweede tabel naast de eerste is, vertegenwoordigt dit een andere stapelcontext.
Stel je nu voor dat er op de eerste tafel vier kleine blokken zijn, allemaal direct zittend op de tafel. Op de top van deze vier blokken staat een glasplaat en op de glasplaat staat een schaal met fruit. De blokken, glasplaat en fruitschaal vertegenwoordigen elk een ander stapelniveau binnen de stapelcontext die de tafel is.
Voor elke webpagina wordt een enkele standaard stapelcontext gemaakt. De wortel van deze context (de tabel) is de html element. Alles in de html-tag bevindt zich op een stapelniveau binnen deze standaard stacking-context (objecten die op de tafel zitten).
Wanneer u een z-indexwaarde anders dan automatisch toewijst aan een element, maakt u een nieuwe stapelcontext met nieuwe stapelniveaus die onafhankelijk zijn van andere stapelcontexten en stapelniveaus op de pagina. Je brengt een andere tafel in de kamer waar voorwerpen op kunnen zitten.
De eenvoudigste manier om de stapelvolgorde te begrijpen, is met een eenvoudig voorbeeld, zo eenvoudig dat we zelfs de gepositioneerde elementen niet eens in overweging nemen.
Denk aan een heel eenvoudige webpagina. Anders dan de standaard Wat verwacht u te zien wanneer u de pagina laadt? Hopelijk duurde het niet lang voordat je je een overwegend blauw scherm voorstelde met uitzondering van een blok rode kleur met de afmetingen die je hebt ingesteld voor de breedte en hoogte van de div. Het rode blok bevindt zich waarschijnlijk in de linkerbovenhoek van de pagina, tenzij je je fantasie een beetje wild laat gaan en het meer css geeft om het ergens anders weer te geven. Je denkt misschien "dus wat, dat was vrij duidelijk", maar wat misschien niet zo voor de hand ligt, is waarom je een rood blok ziet op een blauwe achtergrond. Waarom zie je de div boven op het html-element? De reden hiervoor is dat beide de regels voor stapelvolgorde volgen. In het geval van dit eenvoudige voorbeeld zeggen de regels dat afstammingsblokken in de normale stroom (de div) op een hoger niveau zitten dan de achtergronden en randen van het wortelelement (het html-element). Je ziet de div bovenaan, omdat deze zich op een hoger stapelniveau bevindt. Terwijl het bovenstaande voorbeeld alleen een stapel met twee niveaus bevat, zijn er zeven mogelijke niveaus op elke stapelcontext, die hieronder worden vermeld. Deze zeven niveaus vormen de regels voor de stapelvolgorde. Een element op niveau zeven wordt weergegeven boven (dichter bij de kijker) dan elementen op niveau één tot en met zes. Een element op niveau vijf wordt boven een element op niveau twee weergegeven. Een element op ... nou, je snapt het wel. De eerste keer dat ik de bovenstaande regels voor stapelvolgorde tegenkwam, viel mij een aantal dingen op. Als je alleen naar niveaus twee, zes en zeven kijkt (die waar de z-index wordt genoemd), dan past het wat je waarschijnlijk aanneemt over de z-index. De positieve z-index bevindt zich op een hoger niveau dan de 0 z-index, die zich op een hoger niveau bevindt dan de negatieve z-index. Dat is waarschijnlijk waar de meesten van ons niet meer denken aan al deze stapellagen. Voorafgaand aan deze regels had ik aangenomen dat al het andere gelijkwaardig was aan een z-index van 0. Dat is duidelijk niet het geval. In feite zit bijna alles op een niveau onder het z-index = 0-niveau. Wat ook interessant is, is dat niet-gepositioneerde elementen zich op vier verschillende stapelniveaus bevinden. Het is logisch als je erover nadenkt. Als alle niet-gepositioneerde elementen zich op hetzelfde stapelniveau bevinden, zien we geen tekst (inline-kader) bovenop een div (vak op blokniveau). Een paar keer heb ik het gehad over het maken van nieuwe stapelcontexten. Wanneer u een andere z-indexwaarde dan Laten we opnieuw aan tabellen denken als stapelcontexten. Vroeger hadden we een tafel en op de top van de tafel waren vier blokken, een bord met glas en een fruitschaal. Stel je voor dat de tweede tafel die we hebben geïntroduceerd ook vier blokken heeft van dezelfde grootte en een glasplaat bovenop, maar geen fruitschaal. Je zou verwachten dat de fruitschaal van tafel één het hoogste item in de kamer is. Het zit op het hoogste niveau (het heeft de grootste z-index). Wat zou er dan gebeuren als we tafel één en alles er bovenop zouden verplaatsen naar de kelder? Die fruitschaal zou nu lager zijn dan alles op tafel twee, omdat tafel één zelf is verplaatst naar een niveau onder tafel twee. Hetzelfde gebeurt met gepositioneerde elementen op een webpagina. Overweeg de markup en de styling hieronder. Zullen HTML: CSS: Hoewel div.two de grotere z-index (100) heeft, zit deze feitelijk onder div.four (z-index = 50) op de pagina. U kunt het resultaat van de bovenstaande code in de afbeelding hieronder zien. De zwarte en gele randen geven de verschillende stapelcontexten weer waarin elk element zich bevindt. Aangezien div.two is opgenomen in div.one, is de z-index ervan relatief Wat we hebben gedaan is ontroerd Als je op mij lijkt, heb je waarschijnlijk een of twee keer struikelen over het werken met de Z-index. Hopelijk helpen deze voorbeelden om op te helderen waarom een element met een grotere z-index soms achter een ander element met een lagere z-index verschijnt. Wanneer je het voor het eerst tegenkomt, lijkt de eigenschap van de z-index een heel eenvoudige eigenschap om te begrijpen. Waarden vertegenwoordigen een locatie op een as in en uit het scherm en dat is alles. Een diepere blik op de z-index onthult dat er achter de schermen iets meer aan de hand is. Er zijn stapelcontexten, stapelingsniveaus en regels om te bepalen welk element hoger of lager in de stapelvolgorde wordt weergegeven. Gepositioneerde elementen kunnen nieuwe stapelcontexten creëren en volledige stapelniveaus worden boven of onder alle niveaus in een andere stapelcontext weergegeven., , , etc. vind je op elke webpagina een single
De zeven niveaus in een stapelcontext
Alles samenvoegen
auto voor een element maakt u een nieuwe stapelcontext, onafhankelijk van andere stapelcontexten.div.two boven of onder weergeven div.four?div width: 200px; hoogte: 200 px; opvulling: 20px; .one, .two, .three, .four position: absolute; .one background: # f00; overzicht: 5px vaste # 000; top: 100px; links: 200 px; z-index: 10; .twee achtergrond: # 0f0; overzicht: 5px vaste # 000; top: 50px; links: 75px; z-index: 100; .three background: # 0ff; overzicht: 5px vaste # 000; top: 125px; links: 25px; z-index: 150; . vier background: # 00f; outline: 5px solid # ff0; top: 200px; links: 350 px; z-index: 50;
div.onestapel. In feite is wat we echt hebben het volgende:
div.one en alles wat het hieronder bevat div.four. Ongeacht welke waarden we instellen op de eigenschap z-index van elementen binnenin div.one ze zullen altijd hieronder worden weergegeven div.four.
Conclusie
Verder lezen
Accentsconagua