Webbteknik 1 - Laboration L5c

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

4 min.

Ö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.

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.

Ä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.

Ä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.

Ä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.

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

Gå nu vidare med föreläsning F5d och därefter laboration L5d.