Sådan bruges positionsegenskaben i CSS til at justere elementer

Placering af elementer med CSS i webudvikling er ikke så let som det ser ud til. Ting kan blive hurtigt komplicerede, når dit projekt bliver større, og uden at have en god forståelse af, hvordan CSS håndterer tilpasning af HTML-elementer, vil du ikke være i stand til at løse dine justeringsproblemer.

Der er forskellige måder / metoder til positionering af elementer med ren CSS. Brug af CSS float er skærm- og placeringsegenskaber de mest almindelige metoder.

I denne artikel vil jeg forklare en af ​​de mest forvirrende måder til at tilpasse elementer med ren CSS: positionsejendommen. Jeg har også en anden tutorial til CSS Display Property her.

Hvis du foretrækker det, kan du se videoversionen af ​​CSS Positioning Tutorial:

Lad os begynde...

CSS Position & Hjælperegenskaber

Så der er 5 vigtigste værdier i Stilling Ejendom :

position: static | relative | absolute | fixed | sticky

og yderligere egenskaber til at indstille koordinaterne for et element (jeg kalder dem "hjælperegenskaber" ):

top | right | bottom | left Og z-index

Vigtig note : Hjælperegenskaber fungerer ikke uden en deklareret position eller med position: statisk.

Hvad er dette z-indeks?

Vi har højde og bredde (x, y) som 2 dimensioner. Z er den 3. dimension. Et element på websiden kommer foran andre elementer, når dets z-indexværdi stiger.

Z-index fungerer ikke med position: staticeller uden en deklareret position.

Du kan se videoen på min kanal for at se, hvordan du bruger z-indekset i flere detaljer:

Lad os nu komme videre med de positioner ejendom værdier ...

1. Statisk

position: staticer standardværdien . Uanset om vi erklærer det eller ej, placeres elementer i en normal rækkefølge på websiden. Lad os give et eksempel:

Først definerer vi vores HTML-struktur:

Derefter opretter vi 2 kasser og definerer deres bredder, højder og positioner:

.box-orange { // without any position declaration background: orange; height: 100px; width: 100px; } .box-blue { background: lightskyblue; height: 100px; width: 100px; position: static; // Declared as static }

Som vi kan se på billedet, definerer position: statisk eller ej ikke nogen forskel.Kasserne placeres i henhold til det normale dokumentflow .

2. Relativ

position: relative: Et elements nye position i forhold til sin normale position.

Startende med position: relativeog for al ikke-statisk positionværdier, er vi i stand til at ændre et elements standardposition ved hjælp af de hjælperejendom, som jeg har nævnt ovenfor.

Lad os flytte den orange kasse ud for den blå.

.box-orange { position: relative; // We are now ready to move the element background: orange; width: 100px; height: 100px; top: 100px; // 100px from top relative to its old position left: 100px; // 100px from left }
BEMÆRK: Brug af position: relativ for et element, påvirker ikke andre elementers positioner.

3. Absolut

I position: relativeer elementet placeret i forhold til sig selv. Dog en absolut lypositioneret element er relativt til dets overordnede .

Et element med position: absolutefjernes fra det normale dokumentflow. Det placeres automatisk til startpunktet ( øverste venstre hjørne) for dets overordnede element. Hvis det ikke har nogen overordnede elementer, er det oprindelige dokument dets overordnede.

Da position: absoluteelementet fjernes fra dokumentflowet, påvirkes andre elementer og opfører sig, da elementet fjernes fuldstændigt fra websiden.

Lad os tilføje en container som overordnet element:

.box-orange { position: absolute; background: orange; width: 100px; height: 100px; }

Nu ser det ud til at den blå kasse er forsvundet, men den er det ikke. Den blå boks opfører sig som den orange boks fjernes, så den skifter op til den orange boks.

Lad os flytte den orange boks 5 pixels:

.box-orange { position: absolute; background: orange; width: 100px; height: 100px; left: 5px; top: 5px; }

Koordinaterne for et absolut positioneret element er i forhold til dets overordnede, hvis forælderen også har en ikke-statisk position. Ellers placerer hjælperegenskaber elementet i forhold til initialet.

.container { position: relative; background: lightgray; } .box-orange { position: absolute; background: orange; width: 100px; height: 100px; right: 5px; // 5px relative to the most-right of parent }

4. Fast

Ligesom position: absolutefjernes faste placerede elementer også fra det normale dokumentflow. Forskellene er:

  • De er kun i forhold til dokumentet og ikke andre forældre.
  • De påvirkes ikke af at rulle .
.container { position: relative; background: lightgray; } .box-orange { position: fixed; background: orange; width: 100px; height: 100px; right: 5px; // 5px relative to the most-right of parent }

Her i eksemplet ændrer jeg den orange boks position til fast , og denne gang er den relativ 5 pixel til højre for, ikke dets overordnede (container) :

As we can see, scrolling the page doesn’t affect the fixed positioned box. It is not relative to its parent (container) anymore.

5. Sticky

position: sticky can be explained as a mix of position: relative and position: fixed.

It behaves until a declared point like position: relative, after that it changes its behavior to position: fixed . The best way to explain position: sticky is by an example:

IMPORTANT: Position Sticky is not supported in Internet Explorer and earlier versions of other browsers. You can check the browser support at caniuse.com.

The best way to understand the CSS Position Property is by practice. Keep coding until you have a better understanding. If something is not clear, I will answer your questions below in the comments section.

Hvis du vil lære mere om webudvikling, er du velkommen til at følge mig på Youtube !

Tak fordi du læste!