CSS position egenskap

Definition och användning

position egenskapen definierar elementets positionstyp.

Förklaring

Denna egenskap definierar positioneringssystemet som används för att skapa elementlayout. Varje element kan positioneras, men absoluta eller fasta element skapar en blockliknande ram, oavsett vad elementet är av typen. Relativt positionerade element flyttas relativt till dess normala plats i strömmen.

Se också:

CSS-tutorial:CSS-positionering

HTML DOM-handboken:position-egenskapen

Exempel

Positionera h2-elementet:

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

Prova själv

CSS-syntax

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

Egenskapsvärde

Värde Beskrivning
absolute

Skapa ett element med absolut positionering, positionerat relativt till den första föräldrelementet utanför static-positionering.

Elementets position definieras genom "left", "top", "right" och "bottom"-egenskaperna.
fixed

Skapa ett element med absolut positionering, positionerat relativt till webbläsarfönstret.

Elementets position definieras genom "left", "top", "right" och "bottom"-egenskaperna.
relative

Skapa ett element med relativ positionering, positionerat relativt till dess normala plats i strömmen.

Därför läggs "left:20" 20 pixlar till elementets LEFT-position.
static Standardvärde. Ingen positionering, elementet visas i den normala strömmen (ignorera top, bottom, left, right eller z-index-uttryck).
inherit Detaljerad beskrivning av hur värdena för positionsegenskapen bör överföra från föräldrelementet.

Tekniska detaljer

Standardvärde: static
Arv: nej
Version: CSS2
JavaScript-syntax: object.style.position="absolute"

TIY-exempel

Positionering: Relativ positionering
Detta exempel visar hur man positionerar ett element relativt till dess normala plats.
Positionering: Absolut positionering
Detta exempel visar hur man använder absoluta värden för att positionera ett element.
Positionering: Fast positionering
Detta exempel visar hur man positionerar ett element relativt till webbläsarfönstret.
Ställ in elementets form
Detta exempel visar hur man ställer in formen på ett element. Detta element klipps till denna form och visas.
Z-index
Z-index kan användas för att placera en element efter ett annat element.
Z-index
Elementen i de ovanstående exemplen har ändrats Z-index.

Webbläsarstöd

Talen i tabellen visar den första webbläsarens version som fullständigt stöder egenskapen.

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