CSS positionering | Static, fixed, relative og absolute

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

<!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>

.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; }