CSS positionering

Varje HMTL-element på en hemsida kan positioneras med css egenskapen position. Det finns 5 olika attribut som position kan ha och dessa är:

static: Detta är grundformateringen av alla typer av HTML-element. Den har ingen speciell positionering och beter sig enligt det normala flödet för en sida. Man kan inte påverka statiska element med egenskaperna top, bottom, left, right.
relative: Ett relativt positionerat element positioneras utifrån dess normala (statiska) position. Genom att sätta värden för top, right, bottom och left så kan man flytta elementet från denna position. Andra element kommer normalt sett inte att fylla upp hålrum som lämnats av en sådan förflyttning.
fixed: Ett element som positioneras fixed placeras utifrån användarens webbläsarfönster (viewport). Detta betyder att elementet alltid kommer att vara synligt där det placeras, även om användaren scrollar skärmen. Egenskaperna top, right, bottom och left används för att placera elementet utifrån skärmfönstrets kanter. Fixerade element flyter ovanför andra element på skärmen och lämnar inga hålrum.
absolute: Ett absolute positionerat element utgår till skillnad från fixed från sin närmast positionerade förälder (ancestor). Denna förälder måste ha en formatering annat än static. Egenskaperna top, right, bottom och left används sedan för att placera elementet utifrån förälderns kanter.
sticky: Sticky är en hybridformatering mellan relative och fixed som är beroende på om skärmen har scrollats eller inte. En sticky måste positioneras med minst en av top, right, bottom eller left precis som en fixed men denna formatering används inte förrän man scrollat till elementets relativa position.

När man har element som överlappar andra element så kan det behövas att man berättar vilket som ska ritas ut överst. Detta gör man med egenskapen z-index. Större värden på denna variabel ritas ut över element med ett lägre värde. z-index kan vara både positiv och negativ.

Jag har gjort en sida med lite bättre förklaring och ett antal exempel. Ta en titt och prova på de olika exemplen innan ni fortsätter med uppgifterna. Ni kan också läsa om positionering på sidorna 359 - 369 i boken.

Skapa en sida med följande HTML:

Skapa en egen .png bild som är transparant där en del av bilden täcker det nedre högra hörnet enligt följande exempel:

Formatera först koden så att ni får ett utseende som ser ut ungefär såhär:

Sedan ska ni genom att använda er av olika positioneringar och andra kända formateringar göra följande utseende, utan att ändra i HTML-koden.

detta exempel

Blocket ska (till skillnad från exemplet) vara bredare än det är högt.
En bild som föreställer din sak.
Ovanpå bilden ska man kunna placera en logotyp eller liten splashbild.
En rubrik (texten ska vara lite större).
En beskrivande text på 2-5 meningar om saken.
Det ska finnas en länk till att hitta mer information (Denna behöver inte leda till någon riktig sida).
Minst ett element ska ha en hover effekt.
Minst två element ska ligga sida vid sida.
Du ska sedan kopiera blocket 3 gånger med olika information i varje block.

I denna uppgift får du inte använda flex eller grid. Detta ska vi öva senare. Här används endast olika positioneringar av dem vi just gått igenom.

Float

Float är en egenskap som man kan använda för att ta ett element ut ur sitt normala flöde och låta det "flyta" mot någon sida (vanligtvis höger eller vänster). Detta är en teknik som inte används så ofta nu för tiden, men det kan ha sina fördelar ibland. Om man till exempel har en längre text och man vill ha en bild där texten formas runt bilden, då kan float vara en bra egenskap att använda.

Läs på sidorna 370-376 för att få en förklaring på hur float fungerar och vilka problem man kan stöta på. Se även sida 411 för ett exempel där de använder float tillsammans med bilder.

Detta är det floatade elementet.

Exempel: När man har en samling text, till exempel som den här texten som är medvetet skriven för att bli en lite längre text. Så kan det vara bra att den innesluts i en lämplig tagg. I det här fallet ett vanligt blockelement, en <div>. I det här fallet sä har vi en text som är ganska lång i en generisk div som inte har någon speciell formattering, men sedan har vi också en annan div-tagg som har en specifierad bredd och ska flyta över texten till höger. Den här texten är tänkt att flyta runt den andra diven och det är anledningen till att det här måste vara en lite längre text, så att resultatet ska synas. För att få till det här så använder den andra div:en sig av egenskapen float: right; vilket gör som namnet indikerar att den kommer att flyta mot höger.

Ett

Två

Tre

Fyra

Här ovan syns ett annat (kanske inte så tufft) exempel. Elementen kommer i HTML-koden i nummerordning, d.v.s. Ett, två, tre, fyra. Men de floatas (mot höger) i den ordningen också vilket gör att ettan hamnar längst till höger för att den floatas först. Nummer tre är speciell för den floatas inte alls och får därför sin position som vanligt. Om man hovrar över bakgrunden så floatas alla knappar (utom 'Tre') till vänster istället. Notera ordningen!!!

Undersök och använd dig av element med egenskapen float. Experimentera med float för att få text att flyta runt ett element. Gör sedan ytterligare ett eller flera blockelement (ungefär som det olivgröna området i exemplet) som innehåller fler element (ungefär som de ljusgröna blocken i exemplet) du kan floata. Undersök hur du kan positionera dessa element med float: right och float: left. Observera att du kan rensa floats med float: none. Undersök därefter egenskapen clear och hur den används tillsammans med float. Din sida ska visa och förklara användningen av alla dessa egenskaper med flera floatade element.

<<Positionering>>

Float