CSS-posisjonering har lenge vært en viktig del av opprettelsen av nettsider. Selv med fremveksten av CSS layout teknikker som Flexbox og CSS Grid, har stillingen fortsatt et viktig sted i en hvilken som helst nettdesigners poser med triks.
Når du bruker CSS-posisjonering, må du først opprette CSS-egenskapen for å kunne fortelle nettleseren om du skal bruke absolutt eller relativ posisjonering for et gitt element. Du må også forstå forskjellen mellom disse to posisjoneringsegenskapene.
Mens absolutt og relativt er de to CSS-posisjonegenskapene oftest brukt i webdesign, er det faktisk fire stater til stillingsegenskapen:
- statisk
- absolutte
- slektning
- fast
Statisk posisjonering
Statisk er standardposisjonen for ethvert element på en nettside. Hvis du ikke definerer posisjonen til et element, er det statisk, noe som betyr at det vises på skjermen basert på hvor det er i HTML-dokumentet og hvordan det vises i den normale strømmen av dokumentet.
Hvis du bruker posisjoneringsregler som topp eller venstre til et element som har en statisk posisjon, ignoreres disse reglene, og elementet forblir der det vises i den normale dokumentstrømmen. Du trenger sjelden å sette et element til en statisk posisjon i CSS fordi det er standardverdien.
Absolutt CSS-posisjonering
Absolutt posisjonering er trolig den enkleste CSS-posisjonen å forstå. Du starter med denne CSS posisjonen eiendommen:
posisjon: absolutt;
Denne verdien forteller nettleseren at alt som skal plasseres, skal fjernes fra den normale strømmen av dokumentet og plasseres i stedet på et eksakt sted på siden. Dette beregnes ut fra elementets nærmeste ikke-statisk posisjonerte forfader. Fordi et helt posisjonert element tas ut av dokumentets normale strøm, påvirker det hvordan elementene før det eller etter det i HTML er plassert på nettsiden. For eksempel, hvis du har en divisjon som er plassert ved hjelp av en verdi av relativ og innenfor den divisjonen, har du et avsnitt som du vil plassere 50 piksler fra toppen av divisjonen, du legger til en posisjonverdi av absolutte til det avsnittet sammen med en offset verdi på 50 piksler på topp eiendom, slik: posisjon: absolutt;topp: 50px;
Dette absolutt posisjonerte elementet viser alltid 50 piksler fra toppen av den relativt posisjonerte delen, uansett hva som ellers viser det i normal strømning. Ditt absolutt posisjonerte element bruker den relativt posisjonerte som kontekst, og posisjoneringsverdien du bruker er i forhold til det. De fire posisjoneringsegenskapene du har tilgang til, er: Du kan også bruke topp eller bunn - siden et element ikke kan plasseres i henhold til begge disse verdiene - og heller ikke Ikke sant eller venstre. Hvis et element er satt til absolutt posisjon, men det ikke har noen ikke-statisk posisjonerte forfedre, så er det plassert i forhold til kroppselementet, som er det høyeste nivåelementet på siden. Relativ posisjonering bruker de samme fire posisjoneringsegenskapene som absolutt posisjonering, men i stedet for å basere elementets posisjon på sin nærmeste ikke-statisk posisjonerte forfader, begynner den fra hvor elementet ville være hvis det fortsatt var i normal strøm. For eksempel, hvis du har tre avsnitt på nettsiden din, og den tredje har en stilling: relativ stil plassert på den, er posisjonen utlignet basert på den nåværende plasseringen. Punkt 1. Punkt 2. Punkt 3. I eksemplet ovenfor er tredje avsnitt plassert 2em fra venstre side av beholderelementet, men fortsatt under de to første avsnittene. Det forblir i den normale strømmen av dokumentet og er oppveid litt. Hvis du endrer den til posisjon: absolutt, noe som følger med det vises på toppen av det fordi det ikke lenger er i den normale strømmen av dokumentet. Elementer på en nettside brukes ofte til å angi en verdi av stilling: relativ uten oppretting verdi etablert, noe som betyr at elementet forblir nøyaktig hvor det ville vises i normal strømning. Dette er gjort utelukkende for å etablere det elementet som en kontekst mot hvilken andre elementer kan plasseres helt. For eksempel, hvis du har en divisjon som omgir hele nettstedet ditt med en klasseværdi på container, som er et vanlig scenario i webdesign, kan divisjonen settes til en posisjon av slektning slik at alt inni det kan bruke det som en posisjoneringskontekst. Fast posisjonering er mye som absolutt posisjonering. Plasseringen av elementet beregnes på samme måte som den absolutte modellen, men faste elementer blir deretter festet på den plasseringen - nesten som et vannmerke. Alt annet på siden ruller forbi det elementet. For å bruke denne egenskapsverdien, angir du: posisjon: fast;
Husk at når du lager et element på plass på nettstedet ditt, skrives det ut på den plasseringen når nettsiden din er skrevet ut. For eksempel, hvis elementet ditt er løst øverst på siden din, vises det øverst på hver utskrevet side fordi det er løst øverst på siden. Du kan bruke medietyper for å endre hvordan de utskrevne sidene viser faste elementer: @media skjerm { h1 # først {stilling: fast; } } @media print { h1 # først {posisjon: statisk; } }
Relativ posisjonering
Hva med fast posisjonering?
