CSS Layout - position Property

position Egenskapsregler tillämpas på elementets positioneringsmetodstyp (static, relative, fixed, absolute eller sticky).

position-attribut

position Attributet specificerar vilken typ av positioneringsmetod som tillämpas på elementet.

Det finns fem olika positionsvärden:

  • static
  • klämfästa element baseras på rullningsposition i relativ (
  • ) och fast (
  • absolute
  • sticky

element är egentligen positionerade med top, bottom, left och right-attributen. Men dessa attribut fungerar inte om position-attribut inte har satts först. Detta fungerar olika beroende på positionens värde.

position: static;

HTML-elementets standardposition är static (statisk).

Element med statisk position påverkas inte av top, bottom, left och right-attributen.

position: static; elementen positioneras inte på något speciellt sätt; de positioneras alltid enligt sidans normala flöde:

Denna <div>-element har position: static;

Detta är den CSS som används:

Exempel

div.static {
  position: static;
  height: 100px;
z-index: -1;

}

position: relative;

position: relative; element är positionerade relativt till sin normala position.

Att sätta top, right, bottom och left-attributen för element med relativ position kommer att leda till att de avviker från sin normala position för att justera. Det kommer inte att justera övrigt innehåll för att anpassa sig till utrymmet som elementet lämnar.

Denna <div>-element har position: relative;

Detta är den CSS som används:

Exempel

div.relative {
  position: relative;
  left: 30px;
  height: 100px;
z-index: -1;

}

position: fixed;

position: fixed; element är positionerade relativt till viewport, vilket innebär att de alltid är på samma plats även om sidan rullas. Top, right, bottom och left-attributen används för att positionera detta element.

Element med fast position lämnar ingen tom plats där de vanligtvis skulle placeras på sidan.

Observera denna fasta element i nederkanten av sidan. Detta är den CSS som används:

Exempel

div.fixed {
  position: fixed;
  bottom: 0;
  top: 80px;
  width: 300px;
  height: 100px;
z-index: -1;

}

Denna <div>-element har position: fixed;

img {

img { element är positionerade relativt till närmaste positionerade anföräldrarelement (inte relativt till viewport som med fixed).

Men om det absolut positionerade elementet inte har några anföräldrar, kommer det att använda dokumentets huvud (body) och röra sig med sidan när den rullas.

Element med högre stackordning hamnar alltid framför element med lägre stackordning.”Positionerade” element är deras position utom static alla andra element.

Detta är ett enkelt exempel:

Denna <div>-element har position: relative;
Denna <div>-element har position: absolute;

Detta är den CSS som används:

Exempel

div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  height: 100px;
z-index: -1; 
height: 200px;
  img {
  div.absolute {
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
z-index: -1;

}

position: -webkit-sticky; /* Safari */

position: -webkit-sticky; /* Safari */ border: 3px solid #73AD21;

element baseras på användarens rullningsposition för positionering.klämfästa element baseras på rullningsposition i relativ (relative) och fast (fast

Element med högre stackordning hamnar alltid framför element med lägre stackordning.) mellan byte. Först kommer det att vara relativt positionerat, tills det når det angivna avståndet i viewporten - sedan 'klistras' det på lämpligt ställe (t.ex. position:fixed). topInternet Explorer, Edge 15 och tidigare versioner stöder inte klämfästa positioneringar. Safari kräver -webkit-prefix (se exempel nedan). Du måste också specificera minstrightInternet Explorer, Edge 15 och tidigare versioner stöder inte klämfästa positioneringar. Safari kräver -webkit-prefix (se exempel nedan). Du måste också specificera minstbottom och left eller

en av dem, så att den klämfästa positioneringen fungerar.I detta exempel kommer sticky-elementet att stanna kvar på sidans topp när det når sin rullningsposition (top: 0

Exempel

)
  div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  background-color: green;
z-index: -1;

}

border: 2px solid #4CAF50;

Överlappande element

z-index När element positioneras kan de överlappa andra element.

Egenskapen specificerar elementets stackordning (vilket element som ska placeras framför eller bakom andra element).

Element kan ha positiv eller negativ stackordning:

Detta är en rubrik

Exempel

Eftersom bilden har z-index: -1, ligger den bakom texten.
  img {
  position: absolute;
  left: 0px;
  top: 0px;
z-index: -1;

}

Prova själv

Element med högre stackordning hamnar alltid framför element med lägre stackordning.Observera: z-indexOm två positionerade element överlappar varandra och inte specificeras

Positionera text i bilden

Hur man lägger till text på en bild:

Exempel

CodeW3C.com Logo
Nedre vänster
Övre vänster
Övre höger
Nedre höger
Centrerad

Prova själv:

Övre vänster Övre höger Nedre vänster Nedre höger Centrerad

Mer exempel

Ställ in elementets form
Detta exempel visar hur du ställer in elementets form. Elementet klipps till denna form och visas.

Alla CSS-positionsegenskaper

Egenskap Beskrivning
bottom Ställ in bottenkanten av positioneringsrutan.
clip Clip the elements with absolute positioning.
left Set the left margin edge of the positioning box.
position Specify the positioning type of the element.
right Set the right margin edge of the positioning box.
top Set the top margin edge of the positioning box.
z-index Set the stacking order of elements.

Further reading

Extra books:CSS positioning overview

Extra books:CSS relative positioning

Extra books:CSS absolute positioning