CSS top eigenschap

Definitie en gebruik

De top-eigenschap bepaalt de toprand van het element. Deze eigenschap definieert de afstand van de bovenste buitenrand van een geplaatst element tot de bovenste rand van zijn omvatting.

Opmerking:Als de waarde van de "position"-eigenschap "static" is, heeft het instellen van de "top"-eigenschap geen effect.

Beschrijving

Voor statische elementen is het auto; voor lengtewaarden is het de bijbehorende absolute lengte; voor percentagewaarden is het de gespecificeerde waarde; anders is het auto.

Voor elementen met een relatieve definitie, als zowel top als bottom auto zijn, zijn hun berekende waarden beide 0; als er een van auto is, wordt de tegengestelde waarde van de andere genomen; als beide niet auto zijn, wordt de waarde van bottom de tegengestelde waarde van top.

Zie ook:

CSS handleiding:CSS positionering

HTML DOM referentiehandleiding:top-eigenschap

Voorbeeld

Stel de bovenste rand van het beeld in op 5 pixels onder de bovenste rand van het omvattende element:

img
  {
  position:absolute;
  top:5px;
  }

Probeer het zelf uit

CSS syntaxis

top: auto|length|initial|inherit;

Eigenschapswaarde

Waarde Beschrijving
auto Standaardwaarde. De positie van de bovenste rand wordt berekend door de browser.
% Stel de bovenste positie in op basis van het percentage van de breedte van het element. Negatieve waarden kunnen worden gebruikt.
length Stel de bovenste positie van het element in met eenheid zoals px, cm, etc. Negatieve waarden kunnen worden gebruikt.
inherit Stelt dat de waarde van de top-eigenschap van het element moet worden geërfd van het ouder-element.

Technische details

Standaardwaarde: auto
Inheritantie: nee
Versie: CSS2
JavaScript syntaxis: object.style.top="50px"

Meer voorbeelden

Gebruik een vaste waarde om de bovenste rand van een afbeelding in te stellen
Dit voorbeeld demonstreert hoe je de bovenste rand van een afbeelding instelt met een vaste waarde.
Gebruik percentages om de bovenste rand van een afbeelding in te stellen
Dit voorbeeld demonstreert hoe je de bovenste rand van een afbeelding instelt met percentages.

browserondersteuning

De cijfers in de tabel vermelden de eerste browserversie die deze eigenschap volledig ondersteunt.

Chrome IE / Edge Firefox Safari Opera
1.0 5.0 1.0 1.0 6.0