En av utmaningarna när man använder CSS-positionering för webbsidor är att vissa av dina element kan överlappa andra. Det här fungerar bra om du vill att det sista elementet i HTML-filen ska ligga på toppen, men vad om du inte gör det eller om du vill ha element som för närvarande inte överlappar andra för att göra det eftersom designen kräver det här "lagrade" utseendet ? För att ändra hur elementen överlappar måste du använda egenskapen hos CSS.
Om du har använt grafikverktyg i Word och PowerPoint eller en mer robust bildredigerare som Adobe Photoshop, är chansen att du har sett något som z-index i aktion. I dessa program kan du markera objektet / objekten som du har ritat och välja ett alternativ att "Skicka till baksida" eller "Ta fram till" vissa delar av ditt dokument. I Photoshop har du inte dessa funktioner, men du har "Layer" -panelen i programmet och du kan ordna var ett element faller på duken genom att omarrangera dessa lager. I båda dessa exempel ställer du i huvudsak z-indexet på dessa objekt.
Vad är Z-Index?
När du använder CSS-positionering för att placera element på sidan, måste du tänka i tre dimensioner. Det finns två standarddimensioner: vänster / höger och topp / botten. Vänster till höger index är känt som x-index, medan övre och nedre är y-index. Så här placerar du element horisontellt eller vertikalt, med hjälp av dessa två index.
När det gäller webbdesign finns det också staplingsordningen på sidan. Varje element på sidan kan läggas över eller under något annat element. Z-indexegenskapen bestämmer var i stapeln varje element är. Om x-index och y-index är de horisontella och vertikala linjerna, är z-index djupet på sidan, i huvudsak den tredje dimensionen.
Tänk på elementen på en webbsida som pappersstycken och själva webbsidan som en collage. Var du lägger papperet bestäms av positionering, och hur mycket av det är täckt av de andra elementen är z-indexet.
- Z-indexet är ett tal, antingen positivt (t ex 100) eller negativt (t ex -100).
- Standard z-index är 0.
Elementet med högsta z-indexet är uppe, följt av nästa högsta och så vidare ner till lägsta z-index. Om två element har samma z-indexvärde (eller det är inte definierat, vilket betyder att använd standardvärdet på 0) lagrar webbläsaren dem i den ordning de visas i HTML.
Så här använder du Z-Index
Ge varje element du vill ha i din stack ett annat z-indexvärde. Om du till exempel har fem olika element:
- element A - z-index på -25
- element B - z-index av 82
- element C - z-index inte inställt
- element D-z-index av 10
- element E-z-index av -3
De kommer att stapla i följande ordning:
- element B
- element D
- element C
- element E
- element A
Det rekommenderas att använda väldigt olika z-indexvärden för att stapla dina element. På det sättet, om du lägger till fler element på sidan senare, har du plats att lagra dem utan att behöva justera z-indexvärdena för alla andra element. Till exempel:
- 100 för ditt bästa element
- 0 för ditt mittelement
- -100 för ditt undre element
Du kan också ge två element samma z-indexvärde. Om dessa element är staplade visas de i den ordning de är skrivna i HTML, med det sista elementet ovanpå.
En anteckning: För ett element för att effektivt använda z-indexegenskapen måste det vara ett blocknivåelement eller använd en visning av "block" eller "inline-block" i din CSS-fil.
