CSS positionering | Static, fixed, relative og absolute
NemProgrammering.dk logo
Læs mere om denne UnoEuro Rabatkode
UnoEuro rabatkode

CSS positionering | Static, fixed, relative og absolute

Lad NemProgrammering.dk´s eksperter lave din hjemmeside for dig
Vi tilbyder professionel hjælp til udvikling af hjemmesider og webshops. Læs mere om vores ydelser her!

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

<!-- HTML filen: -->
<!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="css.css">
    </head>
    <body>
        
        <div class="static">Static</div>
        
        <div class="fixed">fixed</div>
       
        <div class="relative">
            
            <div class="absolute">absolute</div>
            
            relative</div>
       
        <div class="absolute">absolute</div>
        
         
         <br/><br/><br/>
         <br/><br/><br/>
         <p>Tekst</p>
         <br/><br/><br/>
         <br/><br/><br/><br/>
         <br/><br/><br/><br/>
         <br/><br/><br/><br/>
         <br/><br/><br/><br/>
         <br/><br/><br/><br/>
         <br/><br/><br/>
         <br/><br/><br/>
         <br/><br/><br/>
         <br/><br/><br/>
         <br/><br/><br/>
         

    </body>
</html>  
        

Her har du kildekoden

/* CSS filen */
.static {
    width: 100px;
    height: 100px;
    background-color: red;
    position: static ;
    top: 50px; /* fungerer ikke */
    left: 300px; /* fungerer ikke */
}

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


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

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

Spørgsmål og kommentarer

Har du et spørgsmål eller en kommentar til denne video/artikel? Så skriv herunder! Alternativt kan du kontakte os på vores forum, hvor en masse hjælpsomme personer sidder klar til at hjælpe.

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