CSS Layout - Stillingen Ejendom

Indholdsfortegnelse

Egenskaben position angiver typen af positioneringsmetode, der bruges til et element (statisk, relativ, fast, absolut eller klæbrig).

Stillingen Ejendom

Egenskaben position angiver typen af positioneringsmetode, der bruges til et element.

Der er fem forskellige positionsværdier:

static
relative
fixed
absolute
sticky

Elementer placeres derefter ved at bruge toppen, bunden, venstre og højre ejendomme. Disse egenskaber vil dog ikke fungere, medmindre positionen egenskaben indstilles først. De fungerer også forskelligt afhængigt af stillingen værdi.

CSS-egenskab `position: static;`

HTML-elementer er som standard placeret statisk.

Statisk placerede elementer påvirkes ikke af top-, bund-, venstre- og højreegenskaberne.

Et element med position: static; er ikke placeret på nogen speciel måde; det er altid placeret i overensstemmelse med det normale flow på siden:

This <div> element has position: static;

Her er den CSS, der bruges:

Eksempel

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

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
div.static {
  position: static;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: static;</h2>

<p>An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page:</p>

<div class="static">
This div element has position: static;
</div>

</body>
</html>

CSS-egenskab `position: relativ;`

Et element med position: relative; er placeret i forhold til dets normale position.

Indstilling af top, højre, bund og venstre egenskaber for et relativt placeret element vil forårsage den skal justeres væk fra sin normale position. Andet indhold vil ikke blive justeret, så det passer ind i et hul efterladt af element.

This <div> element has position: relative;

Her er den CSS, der bruges:

Eksempel

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

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: relative;</h2>

<p>An element with position: relative; is positioned relative to its normal position:</p>

<div class="relative">
This div element has position: relative;
</div>

</body>
</html>

CSS-egenskab `position: fixed;`

Et element med position: fixed; er placeret i forhold til viewporten, hvilket betyder, at det altid forbliver på samme sted, selvom siden rulles. Toppen, højre, bund og venstre egenskaber bruges til at placere elementet.

Et fast element efterlader ikke et hul på siden, hvor det normalt ville have været placeret.

Læg mærke til det faste element i nederste højre hjørne af siden. Her er den CSS, der bruges:

Eksempel

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

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: fixed;</h2>

<p>An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:</p>

<div class="fixed">
This div element has position: fixed;
</div>

</body>
</html>

This <div> element has position: fixed;

CSS-egenskab `position: absolut;`

Et element med position: absolute; er placeret i forhold til den nærmeste positionerede forfader (i stedet for placeret i forhold til viewporten, som fast).

Imidlertid; hvis et absolut positioneret element ikke har nogen positionerede forfædre, den bruger dokumentets brødtekst og bevæger sig sammen med siderulning.

Bemærk: Absolut placerede elementer fjernes fra det normale flow og kan overlappe elementer.

Her er et simpelt eksempel:

This <div> element has position: relative;

This <div> element has position: absolute;

Her 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 →

<!DOCTYPE html>
<html>
<head>
<style>
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;
}
</style>
</head>
<body>

<h2>position: absolute;</h2>

<p>An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed):</p>

<div class="relative">This div element has position: relative;
  <div class="absolute">This div element has position: absolute;</div>
</div>

</body>
</html>

CSS-egenskab `position: sticky;`

Et element med position: sticky; er placeret baseret på brugerens rulleposition.

Et sticky element skifter mellem relativ og fast, afhængigt af rullepositionen. Den placeres relativt indtil en given offset position er opfyldt i viewporten - så "klæber den" på plads (som position:fixed).

Bemærk: Internet Explorer understøtter ikke klæbrig positionering. Safari kræver et -webkit- præfiks (se eksempel nedenfor). Du skal også angive mindst én af top, right, nederst eller venstre for klæbrig positionering til arbejde.

I dette eksempel klæber det klæbende element til toppen af siden (top: 0), når du når dets rulleposition.

Eksempel

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

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #cae8ca;
  border: 2px solid #4CAF50;
}
</style>
</head>
<body>

<p>Try to <b>scroll</b> inside this frame to understand how sticky positioning works.</p>

<div class="sticky">I am sticky!</div>

<div style="padding-bottom:2000px">
  <p>In this example, the sticky element sticks to the top of the page (top: 0), when you reach its scroll position.</p>
  <p>Scroll back up to remove the stickyness.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>

</body>
</html>

Positionering af tekst i et billede

Sådan placeres tekst over et billede:

Eksempel

Bottom Left

Top Left

Top Right

Bottom Right

Centered

Prøv det selv:

Øverst til venstre →

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
}

.topleft {
  position: absolute;
  top: 8px;
  left: 16px;
  font-size: 18px;
}

img { 
  width: 100%;
  height: auto;
  opacity: 0.3;
}
</style>
</head>
<body>

<h2>Image Text</h2>
<p>Add some text to an image in the top left corner:</p>

<div class="container">
  <img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
  <div class="topleft">Top Left</div>
</div>

</body>
</html>

Øverst til højre →

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
}

.topright {
  position: absolute;
  top: 8px;
  right: 16px;
  font-size: 18px;
}

img { 
  width: 100%;
  height: auto;
  opacity: 0.3;
}
</style>
</head>
<body>

<h2>Image Text</h2>
<p>Add some text to an image in the top right corner:</p>

<div class="container">
  <img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
  <div class="topright">Top Right</div>
</div>

</body>
</html>

Nederst til venstre →

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
}

.bottomleft {
  position: absolute;
  bottom: 8px;
  left: 16px;
  font-size: 18px;
}

img { 
  width: 100%;
  height: auto;
  opacity: 0.3;
}
</style>
</head>
<body>

<h2>Image Text</h2>
<p>Add some text to an image in the bottom left corner:</p>

<div class="container">
  <img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
  <div class="bottomleft">Bottom Left</div>
</div>

</body>
</html>

Nederst til højre →

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
}

.bottomright {
  position: absolute;
  bottom: 8px;
  right: 16px;
  font-size: 18px;
}

img { 
  width: 100%;
  height: auto;
  opacity: 0.3;
}
</style>
</head>
<body>

<h2>Image Text</h2>
<p>Add some text to an image in the bottom right corner:</p>

<div class="container">
  <img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
  <div class="bottomright">Bottom Right</div>
</div>

</body>
</html>

Centreret →

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
}

.center {
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
  font-size: 18px;
}

img { 
  width: 100%;
  height: auto;
  opacity: 0.3;
}
</style>
</head>
<body>

<h2>Image Text</h2>

<p>Center text in image:</p>

<div class="container">
  <img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
  <div class="center">Centered</div>
</div>

</body>
</html>

Flere eksempler

Dette eksempel viser, hvordan man indstiller formen på et element. Elementet klippes i denne form og vises.

Indstil formen på et element

<!DOCTYPE html>
<html>
<head>
<style>
img {
  position: absolute;
  clip: rect(0px,60px,200px,0px);
}
</style>
</head>
<body>

<img src="w3css.gif" width="100" height="140">

</body>
</html>

Alle CSS-positioneringsegenskaber

bottom: Indstiller den nederste margen for en positioneret boks
clip: Klipper et absolut placeret element
left: Indstiller venstre margenkant for en positioneret boks
position: Angiver typen af positionering for et element
right: Indstiller højre margenkant for en positioneret boks
top: Indstiller den øverste margenkant for en placeret boks

CSS Layout - Stillingen Ejendom

Indholdsfortegnelse

Stillingen Ejendom

CSS-egenskab position: static;

Eksempel

CSS-egenskab position: relativ;

Eksempel

CSS-egenskab position: fixed;

Eksempel

CSS-egenskab position: absolut;

Eksempel

CSS-egenskab position: sticky;

Eksempel

Positionering af tekst i et billede

Eksempel

Flere eksempler

Alle CSS-positioneringsegenskaber

CSS-egenskab `position: static;`

CSS-egenskab `position: relativ;`

CSS-egenskab `position: fixed;`

CSS-egenskab `position: absolut;`

CSS-egenskab `position: sticky;`