Webbteknik 1

Laboration 5C

Positionering

I denna laboration ska du experimentera med egenskapen position och lära dig hur den fungerar.

Förberedelser

  • Öppna mappen L5c i Visual Studio Code (VSC).
  • Öppna filerna index.html och style.css i VSC och öppna sidan i Live Server.
  • Studera den kod som finns i HTML- och CSS-filerna, så att du blir insatt i den.

Relativ positionering

  • Lägg in position: relative; i regeln för #box1. Lägg även in top: 40px; och left: 80px;

    • Om inte position sätts till relative (eller något annat än static som är "default") kommer inte värdena för top och left få någon effekt.
    • Positioneringen blir relativt den plats elementet har i HTML-koden.

  • Prova också med negativa värden samt att byta till bottom och right.

Absolut positionering

  • Ändra till position: absolute; i regeln för #box1.

  • Prova olika värden på top, left och bottom, right.

    • Prova först med endast två av dem, dvs top eller bottom tillsammans med left eller right.
    • Prova sedan att ta med alla fyra, fast då måste du också ta bort width och height ur regeln, eftersom storleken då bestäms utifrån positionering av kanterna.
    • Prova också att använda procent istället för pixel för värdena.

  • Placeringen sker inom fönstret, men följer sedan med dokumentet, då man scrollar. Prova att göra fönstret mindre och scrolla.

  • Observera också att elementet "lyfts ur" den övriga presentationen på webbsidan. Den rad som i HTML-koden ligger under boxen, har skjutits upp. Elementet med absolut positionering ligger i ett "lager" framför övrigt innehåll.

Fix positionering

  • Ändra till position: fixed; i regeln för #box1.
  • Placeringen sker som med absolut positionerng, fast elementet ligger kvar i fönstret, då dokumentet scrollas. Prova att göra fönstret mindre och scrolla.

Sticky positionering

  • Ändra till position: sticky; i regeln för #box1.
  • Placeringen blir som med static eller relative positionering, fast elementet ligger sedan kvar, då man scrollat upp till den position som anges. Prova att göra fönstret mindre och scrolla.
    • Prova att ändra värdet för top och se att elementet "fastnar" vid detta värde, då du scrollar.

Kombination av relativ och absolut positionering

  • Lägg in position: absolute; i regeln för #box2 samt några värden på top och left, t.ex. 30px respektive 20px.

  • Lägg in position: relative; i regeln för #wrapper, dvs för det element som omger box 2.

  • Prova att ändra värdena för top och left i regeln för #box2.

    • Positioneringen sker nu inom "wrapper"-elementet.
    • Även här kan du också använda bottom och right.

Klar