NemProgrammering.dk logo
3 måneders gratis webhotel til alle NemProgrammering.dk brugere! Få din UnoEuro Rabatkode her
UnoEuro rabatkode

CSS positionering | Static, fixed, relative og absolute

CSS kursus | Lær CSS for begyndere
WordPress hjemmeside hjælp

Information om denne video

Underviser: Thomas Iversen, A-kasse priser

I denne lektion skal vi arbejde med positionering i CSS. Der findes en række forskellige måder, hvorpå et HTML-element kan positioneres i forhold til resten af indholdet på siden. Vi skal i denne video kigge på både static, fixed, relative og absolut positionering og prøve at forstå, hvordan de hver især fungerer. Sidst i videoen vil vi også tage et kig på z-index, som kan bruges til at angive, hvilket element som skal vises over et andet element, hvis de skulle ligge oveni hinanden.

Øvelser:
1 - Lav en overskrift som er gemt halvt udenfor skærmen. Gør dette ved at anvende position relative og sæt "left" til en negative pixel værdi.
2 - Du skal lave et billede som ligger bagved et stykke tekst inden i en div som er 500px gange 500px og som har en margin på 100px. Hint: Brug position:relative på div´en, position:absolut på billedet og z-index.

Video tags:

Denne video relaterer til emner såsom: CSS kursus for begyndere, CSS guides, Lær CSS fra bunden, CSS video-tutorials, introduktion til CSS, positionering, static, fixed, relative, absolute og z-index

Her har du kildekoden

<!DOCTYPE html>
<html>
<head>
  <title>Lektion 13</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="Lektion13.css">
</head>
<body>
<div class="static">Static</div>
<div class="fixed">Fixed</div>
<div class="relative">Relative</div>
<div class="absolute">Absolute</div>
<p>Paragraf</p>
<p>Paragraf</p>
<p>Paragraf</p>
<p>Paragraf</p>
<p>Paragraf</p>
<p>Paragraf</p>
<p>Paragraf</p>
<p>Paragraf</p>
<p>Paragraf</p>
</body>
</html>
        

Her har du kildekoden

.static {
  width: 100px;
  height: 100px;
  background-color: red;
  position: static;
}

.fixed {
  width: 100px;
  height: 100px;
  background-color: yellow;
  position: fixed;
  top:100px;
  left:500px;
}

.relative {
  width: 100px;
  height: 100px;
  background-color: green;
  position: relative;
  top:100px;
  left:500px;
  z-index: -1;
}

.absolute {
  width: 100px;
  height: 100px;
  background-color: blue;
  position: absolute;
  top:100px;
  left:500px;
  z-index: -1;
}
        

Spørgsmål og kommentarer

Har du spørgsmål eller kommentarer? Så skriv herunder! Alternativt kan du kontakte os på vores forum, hvor en masse hjælpsomme personer sidder klar ved tasterne.

Url´er bliver automatisk omdannet til links (nofollow).

kommentar på NemProgrammering.dk - lav din egen hjemmeside
Johnny Erbs    14-03-2015

Hej og tak for de gode videoer. Jeg har lige et spørgsmål. eks. vis når man kigger på jeres hjemmeside nemprogrammering.dk så forsvinder siden under navigationsbaren når man scroller ned. Hvis man nu forstiller sig at man skære et snit i baggrunden, så siden i stedet for forsvandt eks. vis 30px under navigationsbaren, altså gennem snittet og under baggrunden, kan det lade sig gøre? mvh. Johnny