Kako koristiti svojstvo position u CSS-u za poravnavanje elemenata

Pozicioniranje elemenata s CSS-om u web razvoju nije tako lako kako se čini. Stvari se mogu brzo zakomplicirati kako vaš projekt postaje veći, a ako nećete dobro razumjeti kako se CSS bavi poravnavanjem HTML elemenata, nećete moći riješiti probleme s poravnavanjem.

Postoje različiti načini / metode za pozicioniranje elemenata s čistim CSS-om. Korištenje CSS float, svojstva prikaza i položaja najčešće su metode.

U ovom ću članku objasniti jedan od najzbunjujućih načina poravnavanja elemenata s čistim CSS-om: svojstvo position. Ovdje također imam još jedan vodič za CSS Display Property.

Ako želite, možete pogledati video verziju CSS Vodiča za pozicioniranje:

Započnimo...

CSS svojstva položaja i pomoćnika

Dakle, postoji 5 glavnih vrijednosti svojstva Position :

position: static | relative | absolute | fixed | sticky

i dodatna svojstva za postavljanje koordinata elementa (ja ih nazivam "pomoćna svojstva" ):

top | right | bottom | left I z-index

Važna napomena : Pomoćna svojstva ne rade bez deklariranog položaja ili s position: static.

Što je ovaj z-indeks?

Imamo visinu i širinu (x, y) kao 2 dimenzije. Z je 3. dimenzija. Element na web stranici dolazi ispred ostalih elemenata kako se njegova z-indexvrijednost povećava.

Z-indeks ne radi sa position: staticili bez deklarirane pozicije.

Video možete pogledati na mom kanalu kako biste detaljnije vidjeli kako koristiti z-indeks :

Ajmo sada s vrijednostima svojstva položaja ...

1. Statički

position: staticje zadana vrijednost . Bez obzira na to prijavljujemo li to ili ne, elementi se na web stranici postavljaju normalnim redoslijedom. Dajmo primjer:

Prvo definiramo našu HTML strukturu:

Zatim kreiramo 2 okvira i definiramo njihove širine, visine i položaje:

.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 }

Kao što vidimo na slici, definiranje položaja: statičan ili ne ne čini nikakvu razliku.Okviri su postavljeni u skladu s uobičajenim protokom dokumenata .

2. Relativni

position: relative: Novi položaj elementa u odnosu na njegov normalni položaj.

Počevši od position: relativei za sve nestatične položajevrijednosti, možemo promijeniti zadani položaj elementa pomoću pomoćnih svojstava koja sam gore spomenuo.

Pomaknimo narančasti okvir pored plavog.

.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 }
NAPOMENA: Korištenje položaja: relativno za element, ne utječe na položaje drugih elemenata.

3. Apsolutno

U position: relative, element je pozicioniran u odnosu na sebe. Međutim, apsolutni lypozicionirani element je u odnosu na svog roditelja .

Element sa position: absoluteuklonjen je iz uobičajenog tijeka dokumenata. Automatski se postavlja na početnu točku ( gornji lijevi kut) svog nadređenog elementa. Ako nema nadređenih elemenata, tada će početni dokument biti njegov nadređeni.

Budući da position: absoluteuklanja element iz tijeka dokumenata, to utječe na ostale elemente i ponaša se dok je element u potpunosti uklonjen s web stranice.

Dodajmo spremnik kao nadređeni element:

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

Sad izgleda kao da je plavi okvir nestao, ali nije. Plava kutija ponaša se kao da je narančasta kutija uklonjena, pa se pomiče prema mjestu narančaste kutije.

Pomaknimo narančasti okvir za 5 piksela:

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

Koordinate apsolutno pozicioniranog elementa relativno su prema roditelju ako roditelj također ima nestatičan položaj. Inače, pomoćna svojstva postavljaju element u odnosu na početno.

.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. Popravljeno

Poput toga position: absolute, fiksno pozicionirani elementi također se uklanjaju iz normalnog toka dokumenata. Razlike su:

  • Oni su samo u odnosu na dokument, ne i bilo koji drugi roditelji.
  • Pomicanje na njih ne utječe .
.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 }

Ovdje u primjeru mijenjam položaj narančaste kutije u fiksni , a ovaj put je to relativno 5px desno od, a ne njegov roditelj (spremnik) :

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.

If you want to learn more about web development, feel free to follow me on Youtube!

Thank you for reading!