Administrere z-indeksen i koden din - dummies

Når du bruker absolutt posisjonering, kan du bestemme nøyaktig hvor ting er plassert, så det er mulig for dem å overlappe. Som standard er elementene som er beskrevet senere i HTML, plassert på toppen av elementene som er beskrevet tidligere.

Håndteringsdybde i CSS

Du kan bruke en spesiell CSS-attributt kalt z-indeks for å endre denne vanlige oppførselen. z -aksen refererer til hvor nært et element ser ut til å være til betrakteren. Dette bildet viser hvordan dette virker.

Med z-indeksen kan du endre hvilke elementer som vises nærmere brukeren.

Attributtet z-indeks krever en numerisk verdi. Høyere tall betyr at elementet er nærmere brukeren (eller på topp). Enhver verdi for z-indeks plasserer elementet høyere enn elementene med standard z-indeks . Dette kan være svært nyttig når du har elementer som du vil se ut over andre elementer (for eksempel menyer som midlertidig vises på toppen av annen tekst).

Her er koden som viser z-indeksen effekt:

zindex. html

#blueBox {

bakgrunnsfarge: blå;

bredde: 100px;

høyde: 100px;

posisjon: absolutt;

venstre: 0px;

topp: 0px;

margin: 0px;

z-indeks: 1;

}

#blackBox {

bakgrunnsfarge: svart;

bredde: 100px;

høyde: 100px;

posisjon: absolutt;

venstre: 50px;

topp: 50px;

margin: 0px;

}

Arbeide med z-indeks

Den eneste endringen i denne koden er tillegg av egenskapen z-indeks . Jo høyere en z-indeksverdi er, desto nærmere objekt ser det ut til brukeren.

Her er et par ting å huske på når du bruker z-indeks :

• Ett element kan helt skjule en annen. Når du begynner å plassere ting helt, kan et element virke forsvunnet fordi det er helt dekket av en annen. Attributtet z-indeks er en god måte å sjekke for denne situasjonen.
• Negativ z-indeks kan være problematisk. Verdien for z-indeks skal være positiv. Selv om negative verdier støttes, håndterer noen nettlesere (ikke minst eldre versjoner av Firefox) dem godt og kan føre til at elementet ditt forsvinner.
• Det kan være best å gi alle verdier en z-indeks . Hvis du definerer z-indeksen for noen elementer og lar z-indeksen være udefinert for andre, har du ingen garanti nøyaktig hva som vil skje. Hvis du er i tvil, bare gi hver verdi sin egen z-indeks , og du vil vite nøyaktig hva som skal overlappe hva.
• Ikke gi to elementer den samme z-indeksen . Poenget til z-indeksen er å tydelig definere hvilket element som skal vises nærmere. Ikke tap denne hensikten ved å tilordne den samme z-indeksen verdien til to forskjellige elementer på samme side.