CSS position egenskab

Definition og brug

position egenskab definerer elementets placeringstype.

Beskrivelse

Denne egenskab definerer lokaliseringsmekanismen, der bruges til at oprette elementets layout. Ethvert element kan lokaliseres, men absolutte eller faste elementer opretter en blokramme, uanset elementets type. Relativt lokaliserede elementer vil justere sig i forhold til deres normale placering i strømmen.

Se også:

CSS Tutorial:CSS Positionering

HTML DOM Reference Manual:position-attributten

Eksempel

Lokalisering af h2-elementet:

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

Prøv det selv

CSS Syntax

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

Egenskabsværdi

Værdi Beskrivelse
absolute

Opretter et absolut lokaliseret element, der lokaliseres i forhold til den første forældre, der ikke er statisk lokaliseret.

Elementets placering defineres ved "left", "top", "right" og "bottom"-egenskaberne.
fixed

Opretter et absolut lokaliseret element, der lokaliseres i forhold til browser-vinduet.

Elementets placering defineres ved "left", "top", "right" og "bottom"-egenskaberne.
relative

Opretter et relativt lokaliseret element, der lokaliseres i forhold til dens normale placering i strømmen.

Derfor vil "left:20" tilføje 20 pixels til elementets LEFT-position.
static Standardværdi. Ingen lokaliseringsmetode, elementet vises i den normale strøm (ignorerer top, bottom, left, right eller z-index-deklarationer).
inherit Definerer, at position-attributten skal arves fra forældreløsken.

Tekniske detaljer

Standardværdi: static
Arv: nej
Version: CSS2
JavaScript Syntax: object.style.position="absolute"

TIY Eksempel

Lokalisering: Relativ lokaliseringsmetode
Dette eksempel viser, hvordan man lokaliserer et element i forhold til dens normale placering.
Lokalisering: Absolut lokaliseringsmetode
Dette eksempel viser, hvordan man bruger absolutte værdier til at lokaliserer elementer.
Lokalisering: Fast lokaliseringsmetode
Dette eksempel viser, hvordan man lokaliserer elementer i forhold til browser-vinduet.
Sæt elementets form
Dette eksempel viser, hvordan man sætter elementets form. Dette element er klippet til denne form og vises.
Z-index
Z-index kan bruges til at placere et element efter et andet.
Z-index
Elementet i eksemplet ovenfor har ændret Z-index.

Browser-understøttelse

Tabelnumre angiver den første browser-version, der fuldt ud understøtter egenskaben.

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