Innehållsförteckning:
Video: ほうれい線消す方法でも消えないシワを薄くしたい 2024
När du använder absolut positionering kan du bestämma exakt var saker placeras, så det är möjligt för dem att överlappa varandra. Som standard beskrivs de element som beskrivs senare i HTML ovanpå element som beskrivits tidigare.
Hanteringsdjup i CSS
Du kan använda ett särskilt CSS-attribut som heter
z-index
för att ändra detta standardbeteende. z -axen avser hur nära ett element som verkar vara för tittaren. Den här bilden visar hur det fungerar.
z-index
kan du ändra vilka element som visas närmare användaren.
Attributet
z-index
kräver ett numeriskt värde. Högre siffror betyder att elementet är närmare användaren (eller på topp). Valfritt värde för
z-index
placerar elementet högre än element med standard
z-index
. Detta kan vara mycket användbart när du har element som du vill visa ovanpå andra element (till exempel menyer som tillfälligt visas ovanpå annan text).
Här är koden som illustrerar
z-index
effekten:
zindex. html
#blueBox {
bakgrundsfärg: blå;
Bredd: 100px;
Höjd: 100px;
position: absolut;
vänster: 0px;
topp: 0px;
marginal: 0px;
z-index: 1;
}
#blackBox {
bakgrundsfärg: svart;
Bredd: 100px;
Höjd: 100px;
position: absolut;
vänster: 50px;
topp: 50px;
marginal: 0px;
}
Arbeta med z-index
Den enda ändringen i den här koden är tillägget av egenskapen
z-index
. Ju högre ett z-indexvärde är, ju närmare objektet verkar vara för användaren.
Här är några saker att tänka på när du använder
z-index
:
- Ett element kan helt dölja en annan. När du börjar positionera saker absolut kan ett element verka försvinn eftersom det är helt täckt av en annan. Attributet
z-index
är ett bra sätt att kolla efter denna situation. - Negativ
z-index
kan vara problematisk. Värdet förz-index
ska vara positivt. Även om negativa värden stöds, hanterar vissa webbläsare (särskilt äldre versioner av Firefox) inte dem bra och kan få ditt element att försvinna. - Det kan vara bäst att ge alla värden ett
z-index
. Om du definierarz-index
för vissa element och lämnarz-index
odefinierat för andra, har du ingen garanti exakt vad som händer. Om du är osäker, ge bara varje värde ett egetz-index
, och du vet exakt vad som ska överlappa vad. - Ge inte två element samma
z-index
. Poängen medz-index
är att tydligt definiera vilket element som ska visas närmare. Bekämpa inte detta syfte genom att tilldela sammaz-index
-värde till två olika element på samma sida.