CSS-positionering har længe været en vigtig del af oprettelsen af websiderlayouts. Selv med fremkomsten af CSS layout teknikker som Flexbox og CSS Grid, har positionering stadig et vigtigt sted i enhver webdesigners taske med tricks.
Når du bruger CSS-positionering, er det første, du skal gøre, at etablere CSS-ejendommen for at kunne fortælle browseren, om du vil bruge absolut eller relativ positionering for et givet element. Du skal også forstå forskellen mellem disse to positioneringsegenskaber.
Mens absolutte og relative er de to CSS positionsegenskaber oftest anvendt i webdesign, er der faktisk fire stater til positionsegenskaben:
- statisk
- absolut
- i forhold
- fast
Statisk positionering
Statisk er standardpositionen for ethvert element på en webside. Hvis du ikke definerer et elements position, er det statisk, hvilket betyder at det vises på skærmen baseret på, hvor det er i HTML-dokumentet, og hvordan det vises i den normale strøm af det pågældende dokument.
Hvis du anvender positioneringsregler som f.eks top eller venstre til et element, der har en statisk position, ignoreres disse regler, og elementet forbliver, hvor det vises i den normale dokumentstrøm. Du skal sjældent være nødt til at indstille et element til en statisk position i CSS, fordi det er standardværdien.
Absolut CSS positionering
Absolut positionering er nok den nemmeste CSS position til at forstå. Du starter med denne CSS position egenskab:
position: absolut;
Denne værdi fortæller browseren, at det, der skal placeres, skal fjernes fra den normale strøm af dokumentet og placeres i stedet på et præcist sted på siden. Dette beregnes ud fra elementets nærmeste ikke-statisk placerede forfader. Fordi et absolut positioneret element tages ud af dokumentets normale strøm, påvirker det, hvordan elementerne før det eller efter det i HTML'en er placeret på websiden. Hvis du f.eks. Har en division, der er placeret ved hjælp af en værdi af relativ og inde i den division, har du et afsnit, som du vil placere 50 pixel fra toppen af divisionen, du tilføjer en positionsværdi på absolut til dette afsnit sammen med en forskudt værdi af 50px på den top ejendom som denne: position: absolut;top: 50px;
Dette absolut positionerede element viser altid 50 pixel fra toppen af den relativt positionerede deling, uanset hvad der ellers vises der i normal strømning. Dit absolut positionerede element bruger den relativt positionerede som sin sammenhæng, og den positioneringsværdi, du bruger, er i forhold til det. De fire positioneringsegenskaber, du har adgang til, er: Du kan også bruge top eller bund - da et element ikke kan placeres i henhold til begge disse værdier - og heller ikke ret eller venstre. Hvis et element er indstillet til en absolut position, men det ikke har nogen ikke-statisk positionerede forfædre, er den placeret i forhold til kropselementet, hvilket er det højeste niveauelement på siden. Relativ positionering bruger de samme fire positioneringsegenskaber som absolut positionering, men i stedet for at basere elementets position på dens nærmeste ikke-statisk positionerede forfader begynder den, hvor elementet ville være, hvis det stadig var i den normale strømning. For eksempel, hvis du har tre afsnit på din webside, og den tredje har en stilling: relative stil placeret på den, er dens position udlignet på baggrund af den aktuelle placering. Stk. 1. Stk. 2. Stk. 3. I ovenstående eksempel er tredje afsnit anbragt 2em fra beholderelementets venstre side, men stadig under de to første afsnit. Det forbliver i dokumentets normale strøm og er lidt forskudt. Hvis du ændrer det til stilling: absolutalt efterfølgende vises oven på det, fordi det ikke længere er i dokumentets normale flow. Elementer på en webside bruges ofte til at indstille en værdi af stilling: relative uden etableret forskydningsværdi, hvilket betyder, at elementet forbliver nøjagtigt, hvor det ville forekomme i normal strømning. Dette gøres udelukkende for at etablere dette element som en kontekst, som andre elementer kan placeres helt. For eksempel, hvis du har en division, der omgiver hele dit websted med en klasseværdi på beholder, som er et fælles scenario i webdesign, kan divisionen indstilles til en position af i forhold så at alt inde i det kan bruge det som en positionerende kontekst. Fast positionering er meget ligesom absolut positionering. Placering af elementet beregnes på samme måde som den absolutte model, men faste elementer fastgøres derefter på den pågældende placering - næsten som et vandmærke. Alt andet på siden ruller forbi det element. Hvis du vil bruge denne egenskabsværdi, indstiller du: stilling: fast;
Husk, når du løser et element på plads på dit websted, udskriver det på den pågældende placering, når din webside udskrives. Hvis dit element f.eks. Er fast øverst på din side, vises det øverst på hver udskrevet side, fordi den er fast øverst på siden. Du kan bruge medietyper til at ændre, hvordan de udskrevne sider viser faste elementer: @media skærm { h1 # først {position: fast; } } @media print { h1 # først {position: statisk; } }
Relativ positionering
Hvad med fast positionering?
