CSS-positionering har länge varit en viktig del i att skapa webbsidor. Även med uppkomsten av CSS-layouttekniker som Flexbox och CSS Grid, har positionering fortfarande en viktig plats i någon webbdesigners väska med tricks.
När du använder CSS-positionering är det första du behöver göra att skapa CSS-egenskapen för att kunna berätta för webbläsaren om du ska använda absolut eller relativ positionering för ett visst element. Du måste också förstå skillnaden mellan dessa två positioneringsegenskaper.
Medan absoluta och relativa är de två CSS-positionegenskaperna oftast används i webbdesign, finns det faktiskt fyra tillstånd till positionsegenskapen:
- statisk
- absolut
- släkting
- fast
Statisk positionering
Statisk är standardpositionen för något element på en webbsida. Om du inte definierar ett elements position är det statiskt, vilket innebär att det visas på skärmen baserat på var det finns i HTML-dokumentet och hur det visas i det normala flödet av det dokumentet.
Om du tillämpar positioneringsregler som topp eller vänster till ett element som har en statisk position, ignoreras dessa regler och elementet förblir där det förekommer i det normala dokumentflödet. Du behöver sällan, om någonsin, ställa in ett element till en statisk position i CSS eftersom det är standardvärdet.
Absolut CSS-positionering
Absolut positionering är förmodligen det enklaste CSS-läget att förstå. Du börjar med den här CSS positionsegenskapen:
position: absolut;
Det här värdet berättar för webbläsaren att det som ska placeras ska avlägsnas från dokumentets normala flöde och istället placeras i en exakt plats på sidan. Detta beräknas utifrån det elementets närmaste, icke-statiskt placerade förfader. Eftersom ett absolut placerat element tas ut ur dokumentets normala flöde påverkar det hur elementen före den eller efter den i HTML är placerade på webbsidan. Till exempel, om du har en division som är placerad med ett värde av relativ och inuti den divisionen, har du ett stycke som du vill placera 50 pixlar från toppen av divisionen, du lägger till ett positionsvärde på absolut till det stycket tillsammans med ett offsetvärde av x 50 bildpunkter på topp egendom, så här: position: absolut;topp: 50px;
Detta absolut positionerade element visar alltid 50 pixlar från toppen av den relativt positionerade delen, oavsett vad som annars visas där i normalt flöde. Ditt absolut positionerade element använder den relativt positionerade som sitt sammanhang och det positioneringsvärde du använder är relativt. De fyra positioneringsegenskaperna du har tillgång till är: Du kan använda antingen topp eller botten - eftersom ett element inte kan placeras enligt båda dessa värden - och heller inte höger eller vänster. Om ett element är inställt på en absolut position, men det inte har några icke-statiskt placerade förfäder placeras det i förhållande till kroppselementet, vilket är det högsta nivån på sidan. Relativ positionering använder samma fyra positioneringsegenskaper som absolut positionering, men i stället för att basera elementets position på sin närmaste, icke-statiskt placerade förfader, börjar den från var elementet skulle vara om det fortfarande fanns i det normala flödet. Om du till exempel har tre stycken på din webbsida, och den tredje har en position: relativ stil placerad på den, är dess position offset baserat på dess nuvarande läge. Paragraf 1. Punkt 2. Punkt 3. I ovanstående exempel placeras tredje stycket 2em från vänster sida av behållarelementet men fortfarande under de två första styckena. Det förblir i det normala flödet av dokumentet och kompenseras något. Om du ändrar det till position: absolut, allt som följer med visas på toppen av det eftersom det inte längre finns i dokumentets normala flöde. Element på en webbsida används ofta för att ange ett värde av position: relativ utan uppräkningsvärde fastställt, vilket betyder att elementet förblir exakt var det skulle se ut i normalt flöde. Detta görs enbart för att fastställa det elementet som ett sammanhang mot vilket andra element kan placeras absolut. Till exempel, om du har en division som omger hela din webbplats med ett klassvärde på behållare, vilket är ett vanligt scenario i webbdesign, kan divisionen ställas till en position av släkting så att allting inuti det kan använda det som en positioneringskontext. Fast positionering är mycket som absolut positionering. Elementets position beräknas på samma sätt som den absoluta modellen, men fasta element fixas sedan på den platsen - nästan som ett vattenstämpel. Allt annat på sidan rullar sedan över det här elementet. För att använda det här egenskapsvärdet ställer du in: position: fast;
Tänk på att när du fixar ett element på plats på din webbplats, skrivs det ut på den platsen när din webbsida skrivs ut. Om till exempel ditt element är fixat högst upp på din sida visas det högst upp på varje utskriven sida eftersom den är fast på toppen av sidan. Du kan använda mediatyper för att ändra hur de utskrivna sidorna visar fasta element: @media skärm { h1 # första {position: fast; } } @media print { h1 # första {position: statisk; } }
Relativ positionering
Vad om fast positionering?
