CSS Positionsejendom forklaret med eksempler

Før du kan være rigtig god til CSS, skal du forstå det grundlæggende. Du skal forstå CSS-egenskaber og deres værdier.

I denne artikel fokuserer vi på CSS-positionsejendommen. Vi skal lære de forskellige værdier af CSS-positionsejendommen, og hvordan de fungerer. Lad os gøre det!

Hvad er CSS-positionsejendommen?

CSS-positionsejendommen definerer placeringen af ​​et element i et dokument. Denne egenskab arbejder med egenskaberne venstre, højre, top, bund og z-indeks for at bestemme den endelige placering af et element på en side.

Der er fem værdier, som positionsejendommen kan tage. De er:

  1. statisk
  2. i forhold
  3. absolut
  4. fast
  5. klæbrig

Lad os diskutere hver enkelt af dem.

Statisk

Dette er standardværdien for elementer. Elementet er placeret i overensstemmelse med dokumentets normale flow. Venstre-, højre-, top-, bund- og z-indeksegenskaberne påvirker ikke et element med position: static.

Lad os bruge et eksempel til at vise, at det ikke position: statichar nogen indflydelse på placeringen af ​​et element. Vi har tre divs placeret i en forældercontainer. Vi bruger dette eksempel i hele denne artikel.

 I'm the other sibling element. All eyes on me. I am the main element. I'm the other sibling element. 

Lad os føje position: statictil div med klassen main-elementog venstre, topværdier til den. Vi tilføjer også nogle stilarter til de andre divs for at skelne dem fra elementet i fokus.

.main-element { position: static; left: 10px; bottom: 10px; background-color: yellow; padding: 10px; } .sibling-element { padding: 10px; background-color: #f2f2f2; }

Dette er resultatet.

Har du bemærket, at der ikke er nogen ændring? Dette bekræfter det faktum, at egenskaberne til venstre og bund ikke påvirker et element med position: static.

Lad os gå til den næste værdi.

I forhold

Elementer med position: relativeforbliver i dokumentets normale flow. Men i modsætning til statiske elementer påvirker egenskaberne til venstre, højre, top, bund og z-indeks elementets position. En forskydning, der er baseret på værdierne for venstre, højre, top- og bundegenskaber, anvendes på elementet i forhold til sig selv.

Lad os erstatte position: staticmed position: relativei vores eksempel.

.main-element { position: relative; left: 10px; bottom: 10px; background-color: yellow; padding: 10px; }

Bemærk, at egenskaberne til venstre og bund nu påvirker elementets position. Bemærk også, at elementet forbliver i dokumentets normale flow, og forskydningen anvendes i forhold til sig selv. Vær opmærksom på dette, når vi går videre til andre værdier.

Absolut

Elementer med position: absoluteer placeret i forhold til deres overordnede elementer. I dette tilfælde fjernes elementet fra den normale dokumentflow. De andre elementer opfører sig som om elementet ikke er i dokumentet. Der oprettes ikke plads til elementet i sidelayoutet. Værdierne for venstre, top, bund og højre bestemmer elementets endelige position.

En ting at bemærke er, at et element med position: absoluteer placeret i forhold til dets nærmeste placerede forfader. Det betyder, at det overordnede element skal have en anden positionsværdi end position: static.

Hvis det nærmeste overordnede element ikke er placeret, placeres det i forhold til det næste overordnede element, der er placeret. Hvis der ikke er noget positioneret forfædreelement, er det placeret i forhold til elementet.

Lad os vende tilbage til vores eksempel. I dette tilfælde ændrer vi hovedelementets position til position: absolute. Vi giver også dets overordnede element en relativ position, så den ikke bliver placeret i forhold til elementet.

.main-element { position: absolute; left: 10px; bottom: 10px; background-color: yellow; padding: 10px; } .parent-element { position: relative; height: 100px; padding: 10px; background-color: #81adc8; } .sibling-element { background: #f2f2f2; padding: 10px; border: 1px solid #81adc8; } 

Her er resultatet.

Bemærk, at der ikke blev oprettet plads i elementet til dokumentet. Elementet er nu placeret i forhold til det overordnede element. Vær opmærksom på dette, når vi går videre til den næste værdi.

Fast

Faste positionselementer ligner absolut placerede elementer. De fjernes også fra dokumentets normale flow. Men i modsætning til absolut positioneret element er de altid placeret i forhold til elementet.

En ting at bemærke er, at faste elementer ikke påvirkes af at rulle. De forbliver altid i samme position på skærmen.

.main-element { position: fixed; bottom: 10px; left: 10px; background-color: yellow; padding: 10px; } html { height: 800px; }

I dette tilfælde er elementet placeret i forhold til elementet. Prøv at rulle for at se, at elementet bliver fast på skærmen.

Lad os gå til den endelige værdi.

Klæbrig

position: stickyer en blanding af position: relativeog position: fixed. Det fungerer som et relativt placeret element indtil et bestemt rullepunkt, og derefter fungerer det som et fast element. Frygt ikke, hvis du ikke forstår, hvad dette betyder, eksemplet hjælper dig med at forstå det bedre.

.main-element { position: sticky; top: 10px; background-color: yellow; padding: 10px; } .parent-element { position: relative; height: 800px; padding: 50px 10px; background-color: #81adc8; }

Rul på resultatfanen for at se resultatet. Du ser det fungerer som et relativt element, indtil det kommer til et bestemt punkt på skærmen, top: 10pxog så kommer det der ligesom et fast element.

Resumé

Ups! Det har været en hel tur. Men jeg håber virkelig, at denne artikel hjalp dig med at forstå CSS-positionsejendommen og hvordan den fungerer.

Du er velkommen til at lege rundt med violinerne, hvis du ikke helt forstår nogen af ​​dem. Du kan ændre værdierne og bemærke forskellen eller endnu bedre, prøv at bruge positionsejendommen til at arbejde på et personligt projekt.

Husk at det bliver konstant praksis at blive bedre til CSS. Så fortsæt med at øve, så bliver du bedre.

Vil du blive underrettet, når jeg offentliggør en ny artikel? Klik her.