De top, bottom, leften righteigenschappen worden gebruikt staat de plaatsing van een element ingesteld. Ze hebben alleen effect op geplaatste elementen, dit zijn elementen waarvan de positioneigenschap op iets anders is ingesteld dan static. Bijvoorbeeld: relative, absolute, fixed, of sticky.
div ( : || || auto || inherit; )U kunt het bijvoorbeeld gebruiken om een pictogram op zijn plaats te duwen:
button .icon ( position: relative; top: 1px; )Of plaats een speciaal element in een container.
.container ( position: relative; ) .container header ( position: absolute; top: 0; )De waarde voor top` bottom` left, en rightkan een van de volgende zijn:
- een van de geldige lengtes van CSS
- een percentage van de hoogte van het bevattende element (voor
topenbottom) of breedte (voorleftenright) autoinherit
Het element zal over het algemeen van een bepaalde kant weggaan als de waarde positief is, en er naar toe als de waarde negatief is. In het onderstaande voorbeeld zal een positieve lengte voor tophet element naar beneden verplaatsen (weg van de bovenkant) en een negatieve lengte voor topzal het element naar boven verplaatsen (naar boven):
Zie de Pen
Top: positieve en negatieve waarden door Matsuko Friedland (@missmatsuko)
op CodePen.
Positie
Het plaatsen van een element met een waarde van top, bottom, leftof rightafhankelijk van de waarde position. Laten we eens kijken wat er gebeurt als we dezelfde waarde instellen voor topelementen met verschillende waarden voor position.
static
De topeigenschap heeft geen effect op niet-geplaatste elementen (elementen met positioningesteld op static). Dit is hoe elementen standaard worden gepositioneerd. Je zou position: static;als een methode kunnen gebruiken om het effect van topop een element ongedaan te maken .
relative
Wanneer topop een element is ingesteld met positioningesteld op relative, zal het element omhoog of omlaag bewegen ten opzichte van zijn oorspronkelijke plaatsing in het document.
Zie de Pen
Top: relatief door Matsuko Friedland (@missmatsuko)
op CodePen.
absolute
Wanneer topis ingesteld op een element met positioningesteld op absolute, zal het element omhoog of omlaag bewegen ten opzichte van de dichtstbijzijnde gepositioneerde voorouder (of het document, als er geen gepositioneerde voorouders zijn).
In deze demo is het roze vak aan de linkerkant 50 px lager dan de bovenkant van de pagina geplaatst omdat het geen gepositioneerde voorouderelementen heeft. Het roze vak aan de rechterkant is 50 px naar beneden vanaf de bovenkant van de ouder geplaatst, omdat de ouder een positionvan heeft relative.
Zie de Pen
Top: absoluut door Matsuko Friedland (@missmatsuko)
op CodePen.
fixed
Wanneer topis ingesteld op een element met positioningesteld op fixed, zal het element omhoog of omlaag bewegen ten opzichte van de viewport van de browser.
Zie de Pen
Top: opgelost door CSS-Tricks (@ css-tricks)
op CodePen.
Op het eerste gezicht lijkt het alsof er geen verschil is tussen absoluteen fixed. Het verschil is te zien wanneer u ze vergelijkt op een pagina met voldoende inhoud om te scrollen. Terwijl u naar beneden scrolt, is het fixedpositie-element altijd in beeld, terwijl het absolutepositie-element wegschuift.
Zie Pen
scrollen: vast versus absoluut door CSS-Tricks (@ css-tricks)
op CodePen.
sticky
Wanneer topis ingesteld op een element met positioningesteld op sticky, zal het element omhoog of omlaag bewegen ten opzichte van de dichtstbijzijnde voorouder met een schuifvak (of de viewport, als geen voorouder een schuifbalk heeft), beperkt tot de grenzen van het bevattende element.
Instellen topop een stickygepositioneerd element doet niet veel, tenzij de container groter is dan het is en je voldoende inhoud hebt om te scrollen. Net als bij fixed, blijft het element in beeld terwijl u scrolt. In tegenstelling tot fixed, zal het element uit het zicht vallen zodra het de randen van het bevattende element bereikt.
Zie Pen
scrollen: opgelost versus plakkerig door CSS-Tricks (@ css-tricks)
op CodePen.
Gotchas
Tegengestelde kanten instellen
U kunt een waarde voor elk van de set top, bottom, left, en rightop een enkel element. Als u waarden instelt voor tegenoverliggende zijden ( topen bottom, of leften right), is het resultaat mogelijk niet altijd wat u verwacht.
In de meeste gevallen bottomwordt genegeerd als deze topal is ingesteld en rightwordt genegeerd als deze leftal is ingesteld. Als de richting is ingesteld op rtl(rechts naar links), leftwordt dit genegeerd in plaats van right. Om ervoor te zorgen dat elke waarde een effect heeft, moet het element zijn positioningesteld op absoluteof fixeden heightingesteld op auto(standaard).
In dit voorbeeld hebben we besloten top, bottom, leften rightop `20px` en verwacht elke zijde van de binnendoos 20 pixels weg te zijn van de zijden van de buitendoos:
Zie de peninstelling
boven, onder, links en rechts door CSS-Tricks (@ css-tricks)
op CodePen.
Wanneer gefixeerd, is dit niet relatief ten opzichte van de viewport
Elementen met positioningesteld op fixedzijn niet altijd gepositioneerd ten opzichte van de viewport. Het zal met betrekking tot de dichtstbijzijnde voorouder met zijn gepositioneerd transform, perspectiveof filtereigenschappenset iets anders dan none, indien aanwezig.
Ruimte toevoegen of verwijderen
Als je een element hebt geplaatst en ontdekt dat er nu een lege ruimte is of niet genoeg ruimte op de plaats waar je had verwacht, kan het zijn dat het te maken heeft met het feit of het element zich in of uit de documentstroom bevindt.
Wanneer een element uit de documentstroom wordt gehaald, betekent dit dat de ruimte die het oorspronkelijk op de pagina innam, verdwijnt. Dit is het geval wanneer een element is gepositioneerd absoluteof fixed. In dit voorbeeld is de container met het absoluut gepositioneerde element ingestort omdat het absoluut gepositioneerde element uit de documentstroom is verwijderd:
Zie de Pen-
documentstroom door Matsuko Friedland (@missmatsuko)
op CodePen.
Browser-ondersteuning
U kunt een kijkje nemen, maar u hoeft zich geen zorgen te maken over de verschillende browsers voor de topaccommodatie. Gebruik naar believen.