I denna övningsuppgift ska vi träna på att använda egenskapen position som kan ha följande värden:
static: Element läggs efter varandra (standardinställning).
relative: Ett elements position är relativ i förhållande till elementets ursprungliga position (dvs sin normala position i dokumentflödet). Plats skapas i dokumentet, men elementet ligger lite vid sidan om platsen.
fixed: Positionen för ett element är fixerad i relation till webläsarfönstret och kommer att ligga kvar på samma plats på skärmen även om man scrollar på sidan. Tar ej upp plats på sidan.
absolute: Positionen för ett element bestäms relativt webläsarfönstet som det ser ut när sidan laddas. Följer med vid scrollning. Tar ej upp plats i dokumentet. Om elementet ligger innuti ett annat element med annan positionering än static används det elementet som referenspunkt.
Förskjutningen för element med relative, fixed och absolute styrs sedan med egenskaperna top, bottom, left och right som t.ex kan ha ett antal pixlar som värde (kan även ha negativa värden).
Element som är positionerade med relative, fixed eller absolute kan ha en position på z-axeln (dvs ligga ovanpå varandra). Positionen på z-axeln styrs med egenskapen z-index som kan ha ett heltal som värde (eller auto).
Med i denna fil finns en HTML-fil och 4 bilder. Dessa får du inte göra några ändringar i.
Gör en css-fil, style.css, som du lägger i samma mapp som övriga filer. Följande formatteringar ska göras. Inga andra formatteringar är tillåtna.
Testa att scrolla på sidan och ändra storleken på webläsarfönstret så att du ser och förstår hur de positioneringar du gjort fungerar. Det bör se ut ungefär så här.
Redovisning: Skicka in din css-fil.