Positioneringselement på en webbsida med CSS Position Property

Maj 15, 2024

Innan Cascading Style Sheets var du begränsad i kontrollen över objektets position på din webbplats. Du kan använda HTML-tabellen för att kontrollera positioneringen något men det var inte särskilt exakt. Nu med CSS kan du ha exakt kontroll över hur varje element är placerat på din webbsida.

Innan du kan använda CSS-positionsegenskapen för att placera element på din webbsida måste vi diskutera terminologin som används för att kommunicera med webbläsaren. CSS beaktar inte bara bredden och höjden på din webbsida utan också måtten på webbläsaren.

Webbläsarens bredd och höjd
Först kanske du tror att detta hänvisar till det öppna webbläsarfönstret. Men det hänvisar verkligen till hela webbläsaren inklusive kontrollerna och knapparna.
Levande bredd och höjd
Detta är termen för webbläsarens visningsområde. Det inkluderar inte kontrollerna.
Dokumentbredd och höjd
Detta är hela webbsidans bredd och höjd. Om dessa dimensioner är större än Live-bredden och höjden, kommer webbläsaren att visa rullningsfält efter behov.

Nu när du känner till villkoren för gränserna där du kan placera delar av din webbsida med CSS, låt oss ta en titt på de fyra positionsvärdena.

Statisk
Detta är standard. Om du inte anger något annat för ett element använder webbläsaren statisk positionering. Precis som det låter, med statisk positionering kan du inte flytta om element på webbsidan. Så hur bestämmer webbläsaren var varje objekt ska placeras på din webbsida? Den placerar varje element i den ordning de förekommer i din HTML-kod. Om du har en logotypbild, sedan en hälsning och sedan upphovsrättsmeddelandet i din HTML kommer webbläsaren att placera dessa på webbsidan i den ordningen. Du kan inte flytta hälsningen ovanför logobilden.
Relativ
Relativ positionering fungerar på samma sätt som statisk genom att ordningen på elementen i HTML-koden styr flödet för elementen på sidan. Du kan dock använda relativ positionering för att styra positionen för ett element i förhållande till de andra elementen på webbsidan.
Absolut
När du använder absolut positionering med ett element gör detta element oberoende av resten av webbsidan. Eftersom dess placering inte längre bestäms av HTML-ordningen, måste du använda X- och Y-koordinater för att placera elementet.
Fast
Detta fungerar på samma sätt som absolut positionering. Elementet som har fast positionering kommer dock inte att bläddra med webbsidan. Detta är en trevlig funktion att använda för en logotyp eller meny som du vill förbli synlig när sidan rullar uppåt.

Video Instruktioner: HTML & CSS svenska - 24 - Bakgrundsbilder (Maj 2024).

Positioneringselement på en webbsida med CSS Position-egenskapen, HTML, CSS, CSS-positionsegenskap, statisk positionering, relativ positionering, absolut positionering, fast positionering, hur man placerar element på en webbsida, använd CSS för att placera element på en webbsida

Tidigare Artikel

Nästa Artikel

Relaterade Artiklar

datorer

Flash-tidslinje och lager

Maj 2024

I vår sista handledning introducerade vi FlashR Tidslinje, lades ramar till tidslinjen och ritade en rektangel på scenen. Nu har vi ett fast grönt bakgrundsskikt. Om du drar Playhead över 50 ramar,...

datorer

Envato marknadsöversikt

Maj 2024

Envato Market är en marknad för försäljning av webbplatsmallar, Flash, Unity 3D, ljud, grafik, 3D-modeller och material, kod, plugins, foton och naturligtvis rörelsegrafik. Som ni ser kan du sälja...