Vraag Verschil tussen auto, 0 en geen z-index?


Wat is het verschil tussen:

  1. z-index: auto
  2. z-index: 0
  3. helemaal geen z-index

alle bovenstaande scenario's zijn voor een div die twee divs omsluit, div1 en div2 elk met een z-index die respectievelijk 9 en 10 is.

De insluitende div bevindt zich in de stapelcontext van html.


15
2018-01-01 11:02


oorsprong


antwoorden:


Niet opgeven z-index is hetzelfde als z-index: auto; dat is de beginwaarde.

auto en 0 hetzelfde betekenen als uw element geen eigen stapelcontext creëert; bijv. het is niet gepositioneerd als relatief, absoluut of vast.

Als je insluit div is niet gepositioneerd, dan wat je ook hebt ingesteld z-index het doet er niet toe; het en al zijn inhoud zullen deelnemen aan de stacking-context van htmlen de nazaten ervan zullen er altijd voor staan.


19
2018-01-01 11:04



z-index: automatisch

Stelt de stapelvolgorde in die gelijk is aan die van zijn ouders. Dit is standaard.

z-index: 0

doet niets

z-index: geen

Stelt de stapelvolgorde in die gelijk is aan zijn ouders, hetzelfde als automatisch.

z-index: erven

Geeft op dat de z-index moet worden overgenomen van het bovenliggende element

Referentie voor verder lezen en testen:

Link


2
2018-01-01 11:05



z-index:0 is altijd de "standaardlaag" (de laag waarin alle elementen zonder een expliciete z-index wonen), en z-index:auto middelen: "Stelt de stapelvolgorde in die gelijk is aan de bovenliggende". Omdat alle kinderen van een ouder standaard beginnen in de "z-laag 0" - ten opzichte van hun ouderdan niet van invloed z-index:auto en z-index:0 betekent hetzelfde: ze bevinden zich allebei in dezelfde "laag" en hun stapelvolgorde is in overeenstemming met de standaard regels voor stapelen, die u kunt zien hier.


1
2017-07-05 11:03



n CSS, u kunt twee of meer objecten positioneren om elkaar te overlappen. Hun z-indexen bepalen welke objecten "voor" of "achter" andere objecten zijn die ze overlappen. Hoe hoger de z-index van een object, hoe hoger de stapel objecten die wordt weergegeven


0
2018-01-01 11:05