Inhoudsopgave:
Video: How to Use Garmin Pay on Your Garmin Device 2024
Wanneer u absolute positionering gebruikt, kunt u precies bepalen waar dingen worden geplaatst, zodat ze elkaar kunnen overlappen. Standaard worden elementen die later in HTML worden beschreven bovenop elementen geplaatst die eerder zijn beschreven.
Omgaan met diepte in CSS
U kunt een speciaal CSS-kenmerk met de naam
z-index
gebruiken om dit standaardgedrag te wijzigen. De z -as verwijst naar hoe dichtbij een element voor de kijker lijkt te zijn. Deze afbeelding laat zien hoe dit werkt.
z-index
kunt u wijzigen welke elementen dichter bij de gebruiker worden weergegeven.
Het attribuut
z-index
vereist een numerieke waarde. Hogere getallen betekenen dat het element dichter bij de gebruiker staat (of op boven). Elke waarde voor
z-index
plaatst het element hoger dan elementen met de standaard
z-index
. Dit kan erg handig zijn wanneer u elementen heeft die u boven andere elementen wilt weergeven (bijvoorbeeld, menu's die tijdelijk bovenaan andere tekst verschijnen).
Hier is de code die het
z-index
effect illustreert:
zindex. html
#blueBox {
achtergrondkleur: blauw;
breedte: 100px;
hoogte: 100 px;
positie: absoluut;
links: 0px;
top: 0px;
marge: 0px;
z-index: 1;
}
#blackBox {
achtergrondkleur: zwart;
breedte: 100px;
hoogte: 100 px;
positie: absoluut;
links: 50px;
boven: 50px;
marge: 0px;
}
Werken met z-index
De enige wijziging in deze code is de toevoeging van de eigenschap
z-index
. Hoe hoger een Z-indexwaarde is, hoe dichter het object bij de gebruiker lijkt te zijn.
Hier zijn een paar dingen waarmee u rekening moet houden bij het gebruik van
z-index
:
- Eén element kan een ander volledig verbergen. Wanneer u de dingen absoluut gaat positioneren, lijkt een element te verdwijnen omdat het volledig door een ander wordt bedekt. Het kenmerk
z-index
is een goede manier om op deze situatie te controleren. - Negatief
z-index
kan problematisch zijn. De waarde voorz-index
moet positief zijn. Hoewel negatieve waarden worden ondersteund, kunnen sommige browsers (met name oudere versies van Firefox) ze niet goed verwerken en kan uw element verdwijnen. - Het is het beste om alle waarden een
z-index
te geven. Als u dez-index
voor sommige elementen definieert en dez-index
ongedefinieerd laat voor anderen, heeft u geen garantie wat er precies zal gebeuren. Als u twijfelt, geeft u gewoon elke waarde zijn eigenz-index
, en u weet precies wat wat moet overlappen. - Geef geen twee elementen dezelfde
z-index
. Het punt van dez-index
is om duidelijk te definiëren welk element dichterbij moet komen. Versla dit doel niet door dezelfdez-index
waarde toe te wijzen aan twee verschillende elementen op dezelfde pagina.