Styring af z-indeks i din kode - dummies

Når du bruger absolut positionering, kan du bestemme præcis, hvor tingene placeres, så det er muligt for dem at overlappe hinanden. Som standard er elementer, der beskrives senere i HTML, placeret oven på de tidligere beskrevne elementer.

Håndteringsdybde i CSS

Du kan bruge en særlig CSS-attributter kaldet z-indeks for at ændre denne standardadfærd. z -axis henviser til, hvor tæt et element ser ud til at være til seeren. Dette billede viser, hvordan dette virker.

Med z-indeks kan du ændre hvilke elementer der vises tættere på brugeren.

Egenskaben z-indeks kræver en numerisk værdi. Højere tal betyder, at elementet er tættere på brugeren (eller på top). Enhver værdi for z-indeks placerer elementet højere end elementer med standard z-indeks . Dette kan være meget nyttigt, når du har elementer, som du vil se ud over andre elementer (for eksempel menuer, der midlertidigt vises oven på anden tekst).

Her er koden som illustrerer z-indekset effekt:

zindex. html

#blueBox {

baggrundsfarve: blå;

bredde: 100px;

højde: 100px;

position: absolut;

venstre: 0px;

top: 0px;

margen: 0px;

z-indeks: 1;

}

#blackBox {

baggrundsfarve: sort;

bredde: 100px;

højde: 100px;

position: absolut;

venstre: 50px;

top: 50px;

margen: 0px;

}

Arbejde med z-indeks

Den eneste ændring i denne kode er tilføjelsen af ​​egenskaben z-indeks . Jo højere en z-indeksværdi er, desto tættere er objektet som brugeren.

Her er et par ting at huske på, når du bruger z-indeks :

• Et element kan helt skjule en anden. Når du begynder at positionere tingene helt, kan et element virke forsvinder, fordi det er helt dækket af en anden. Egenskaben z-indeks er en god måde at tjekke for denne situation.
• Negativ z-indeks kan være problematisk. Værdien for z-indeks skal være positiv. Selvom negative værdier understøttes, håndterer nogle browsere (især ældre versioner af Firefox) dem ikke godt og kan få dit element til at forsvinde.
• Det kan være bedst at give alle værdier en z-indeks . Hvis du definerer z-indekset for nogle elementer og forlader z-indekset udefineret til andre, har du ingen garanti præcis, hvad der vil ske. Hvis du er i tvivl, giv bare værdien sin egen z-indeks , og du ved præcis, hvad der skal overlappe hvad.
• Giv ikke to elementer det samme z-indeks . Punktet i z-indekset er klart at definere hvilket element der skal vises nærmere. Undgå at besejre dette formål ved at tildele samme z-indeks -værdi til to forskellige elementer på samme side.