CSS positie eigenschap

Definition and Usage

The position property defines the type of positioning of the element.

Verklaring

Deze eigenschap definieert het positie-mechanisme dat wordt gebruikt om de elementenindeling te bouwen. Elk element kan worden gepositioneerd, maar absolute of fixed elementen genereren een blokkenschaal, ongeacht het type van het element zelf. Elementen met relatieve positie worden verschoven ten opzichte van hun standaardpositie in de stroom.

Zie ook:

CSS Tutorial:CSS Positionering

HTML DOM Referentiemanual:Positionseigenschap

Voorbeeld

Positioneer de h2-elementen:

h2
  {
  position:absolute;
  left:100px;
  top:150px;
  }

Probeer het zelf

CSS Syntax

position: static|absolute|fixed|relative|sticky|initial|inherit;

Eigenschapswaarde

Waarde Beschrijving
absolute

Genereer een element met absolute positie, positioneren ten opzichte van de eerste ouder-element buiten de static-positie.

De positie van het element wordt bepaald door de "left", "top", "right" en "bottom"-eigenschappen.
fixed

Genereer een element met absolute positie, positioneren ten opzichte van het browservenster.

De positie van het element wordt bepaald door de "left", "top", "right" en "bottom"-eigenschappen.
relative

Genereer een element met relatieve positie, positioneren ten opzichte van de normale positie in de stroom.

Dus, "left:20" voegt 20 pixels toe aan de LEFT-positie van het element.
static Standaardwaarde. Zonder positie verschijnt het element in de normale stroom (negeer top, bottom, left, right of z-index-aanwijzingen).
inherit Het wordt voorgesteld dat de waarde van de position-eigenschap van de ouder-element moet worden geërfd.

Technische details

Standaardwaarde: static
Inheritsiviteit: nee
Versie: CSS2
JavaScript Syntax: object.style.position="absolute"

TIY Voorbeeld

Positioneren: Relatieve positie
Dit voorbeeld demonstreert hoe je een element positioneert ten opzichte van de normale positie van een element.
Positioneren: Absoluut positioneren
Dit voorbeeld demonstreert hoe je een element positioneert met behulp van absolute waarden.
Positioneren: Vaste positie
Dit voorbeeld demonstreert hoe je een element relatief ten opzichte van het browservenster positioneert.
Instellen van de vorm van een element
Dit voorbeeld demonstreert hoe je de vorm van een element instelt. Dit element wordt afgesneden tot binnen deze vorm en wordt weergegeven.
Z-index
Z-index kan worden gebruikt om een element achter een ander element te plaatsen.
Z-index
Het element in het voorbeeld is de Z-index veranderd.

Browserondersteuning

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

Chrome IE / Edge Firefox Safari Opera
1.0 7.0 1.0 1.0 4.0