Stijl positie eigenschap

Definitie en gebruik

Position Stel het type van de positie methode (statisch, relatief, absoluut of vast) in of retourneer voor het element.

Raadpleeg ook:

CSS Handleiding:CSS Positionering

CSS Referentiehandleiding:Position-eigenschap

Voorbeeld

Voorbeeld 1

Verander de positie van het <div>-element van relatieve positie naar absolute positie:

document.getElementById("myDIV").style.position = "absolute";

Probeer het zelf

Voorbeeld 2

Gebruik verschillende positietypen:

function myFunction(x)  {
  var whichSelected = x.selectedIndex;
  var posVal = x.options[whichSelected].text;
  var elem = document.getElementById("myDiv");
  elem.style.position = posVal;
}

Probeer het zelf

Voorbeeld 3

Teruggeven van de positie van het <h2>-element:

alert(document.getElementById("myH2").style.position);

Probeer het zelf

Syntax

Teruggeven van de position-eigenschap:

object.style.position

Instellen van de position-eigenschap:

object.style.position = "static|absolute|fixed|relative|sticky|initial|inherit"

Eigenschapswaarde

Waarde Beschrijving
static Elementen worden weergegeven in de volgorde waarin ze in de documentstroom verschijnen. Standaard.
absolute Het element wordt geplaatst ten opzichte van zijn eerste geplaatste (niet-statische) voorouder.
fixed Het element wordt geplaatst ten opzichte van het browservenster.
relative

Het element wordt geplaatst ten opzichte van zijn normale positie.

Dus "left:20" verhoogt de linkerkantpositie van het element met 20 pixels.
sticky

Het element wordt geplaatst op basis van de scrollpositie van de gebruiker.

Sticky-elementen schakelen tussen relative en fixed op basis van de scrollpositie.

Het is relatief geplaatst totdat het de opgegeven afstand in het viewport bereikt - vervolgens 'kleeft' het aan de juiste positie (zoals position:fixed).

Opmerking:Niet ondersteund in IE/Edge 15 of oudere versies. Safari ondersteunt de Webkit-prefix vanaf versie 6.1.
initial Deze eigenschap wordt ingesteld op zijn standaardwaarde. Zie ook initial.
inherit Deze eigenschap erfde van de ouderlijke element. Zie ook inherit.

Technische details

Standaardwaarde: static
Terugwaarde: een string die de positietype van het element aangeeft.
CSS versie: CSS2

Browser support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support