CSS Layout - position Egenskab

position Egenskaber definerer typen af positioneringsmetoder, der anvendes til elementer (static, relative, fixed, absolute eller sticky).

position-attributten

position Egenskaben definerer typen af positioneringsmetode, der anvendes til elementet.

Der er fem forskellige positionsværdier:

  • static
  • relativ
  • fast
  • absolute
  • sticky

elementer bruger faktisk top, bottom, left og right attributter til at placere sig selv. Men medmindre position-attributten først er sat, vil disse attributter ikke fungere. Deres funktioner varierer afhængigt af positionens værdi.

position: static;

HTML-elementer har som standard static (statisk) position.

Elementer med statisk position påvirkes ikke af top, bottom, left og right attributterne.

position: static; elementer vil ikke blive placeret på nogen specielle måder; de vil altid blive placeret i henhold til sidens normale strøm:

Denne <div>-element har position: static; sat.

Dette er den CSS, der bruges:

Eksempel

div.static {
  position: static;
  border: 3px solid #73AD21;
}

Prøv det selv

position: relative;

position: relative; elementer er placeret relativt til deres normale placering.

At sætte top, right, bottom og left attributter for et element med relativ position vil få det til at afvige fra sin normale placering for at justere. Det vil ikke justere det øvrige indhold for at tilpasse sig pladsen, som elementet efterlader.

Denne <div>-element har position: relative; sat.

Dette er den CSS, der bruges:

Eksempel

div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}

Prøv det selv

position: fixed;

position: fixed; elementer er placeret relativt til vinduet, hvilket betyder, at de altid befinder sig på samme sted, selvom siden rulles. Top, right, bottom og left attributter bruges til at placere dette element.

Elementer med fast positionering efterlader ikke tom plads i det sted, de normalt skulle være placeret på siden.

Bemærk dette faste element nederst i højre hjørne af siden. Dette er den CSS, der bruges:

Eksempel

div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}

Prøv det selv

Denne <div>-element har position: fixed; sat.

position: absolute;

position: absolute; elementer er placeret relativt til den nærmeste positionerede anerkendte forælder (ikke relativt til vinduet som ved fixed).

Men hvis en element med absolut position ikke har nogen anerkendte forældre, bruger den dokumentets hoved (body) og flytter med siden, når den rulles.

Bemærk:“Positionerede” elementer er deres positioner undtagen static alle andre elementer.

Dette er et simpelt eksempel:

Denne <div>-element har position: relative; sat.
Denne <div>-element har position: absolute; sat.

Dette er den CSS, der bruges:

Eksempel

div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
} 
div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
}

Prøv det selv

position: sticky;

position: sticky; elementer placeres baseret på brugerens rulningsposition.

stikkelementer baserer sig på rulningspositionen i relativ (relativ) og fast (fast) mellem skift.

Bemærk:Internet Explorer, Edge 15 og tidligere versioner understøtter ikke sticky-placering. Safari kræver -webkit-præfiks (se eksemplet nedenfor). Du skal også mindst specificere top,right,bund eller left én, så sticky-placeringen kan virke.

I dette eksempel vil sticky-elementet blive holdt på toppen af siden, når det når sin rulningsposition (top: 0)

Eksempel

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  background-color: green;
  border: 2px solid #4CAF50;
}

Prøv det selv

Overlapte elementer

Når elementer placeres, kan de overlapne andre elementer.

z-index Egenskaben specificerer elementets stakkesekvens (hvilket element der skal placeres foran eller bag andre elementer).

Elementer kan indstilles til positiv eller negativ stakkesekvens:

Dette er en titel

Da billedets z-index er -1, vises det bag teksten.

Eksempel

img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}

Prøv det selv

Elementer med højere stakkesekvens er altid placeret foran elementer med lavere stakkesekvens.

Bemærk:Hvis to placerede elementer overlapner og ikke er specificeret z-indexHvis ikke, vil den sidste element i HTML-koden vises øverst.

Placer tekst i billedet

Hvordan man placerer tekst på et billede:

Eksempel

CodeW3C.com Logo
Nederst til venstre
Øverst til venstre
Øverst til højre
Nederst til højre
Centreret

Prøv det selv:

Øverst til venstre Øverst til højre Nederst til venstre Nederst til højre Centreret

Flere eksempler

Indstil elementets form
Dette eksempel viser, hvordan du indstiller elementets form. Elementet klippes til denne form og vises.

alle CSS placeringsegenskaber

egenskab beskrivelse
bund Indstil bundens eksterne kantmargen af placeringssystemets ramme.
klip Beskjær absolutt plasserte elementer.
left Sett venstre kantlinjen for plasseringsboksen.
position Definer plasseringstypen til elementet.
right Sett høyre kantlinjen for plasseringsboksen.
top Sett topp kantlinjen for plasseringsboksen.
z-index Sett innrykkingsrekkefølgen til elementet.

Utvidet lesning

Ekstrabøker:CSS plasseringsoversikt

Ekstrabøker:CSS relativ plassering

Ekstrabøker:CSS absolut plassering