Da biste mogli biti stvarno dobri u CSS-u, morate razumjeti osnove. Morate razumjeti CSS svojstva i njihove vrijednosti.
U ovom ćemo se članku usredotočiti na svojstvo CSS položaja. Naučit ćemo razne vrijednosti svojstva položaja CSS i kako oni funkcioniraju. Napravimo to!
Što je svojstvo CSS položaja?
Svojstvo CSS položaja definira položaj elementa u dokumentu. Ovo svojstvo surađuje s lijevim, desnim, gornjim, donjim i z-indeksnim svojstvima kako bi se odredio konačni položaj elementa na stranici.
Pet je vrijednosti koje svojstvo položaja može zauzeti. Oni su:
- statički
- srodnik
- apsolutni
- fiksne
- ljepljiv
Razgovarajmo o svakom od njih.
Statički
Ovo je zadana vrijednost za elemente. Element je pozicioniran u skladu s uobičajenim protokom dokumenta. Svojstva lijevo, desno, gore, dno i z-indeks ne utječu na element sa position: static.
Upotrijebimo primjer da pokažemo da position: staticnema utjecaja na položaj elementa. Imamo tri div-a smještena u nadređeni spremnik. Ovaj ćemo primjer koristiti u ovom članku.
I'm the other sibling element. All eyes on me. I am the main element. I'm the other sibling element. Dodajmo position: staticdiv s razredom main-elementi lijeve, najviše vrijednosti za njega. Također dodajemo neke stilove ostalim div-ovima kako bismo ih razlikovali od elementa u fokusu.
.main-element { position: static; left: 10px; bottom: 10px; background-color: yellow; padding: 10px; } .sibling-element { padding: 10px; background-color: #f2f2f2; }Ovo je rezultat.
Jeste li primijetili da nema promjene? To potvrđuje činjenicu da svojstva lijevo i dno ne utječu na element sa position: static.
Prijeđimo na sljedeću vrijednost.
Relativni
Elementi s position: relativeostaju u normalnom tijeku dokumenta. No, za razliku od statičkih elemenata, svojstva lijevo, desno, gore, dno i z-indeks utječu na položaj elementa. Pomak, zasnovan na vrijednostima lijevog, desnog, gornjeg i donjeg svojstva, primjenjuje se na element u odnosu na njega samog.
Zamijenimo position: statics position: relativeu našem primjeru.
.main-element { position: relative; left: 10px; bottom: 10px; background-color: yellow; padding: 10px; }Primijetite da svojstva lijevo i dno sada utječu na položaj elementa. Također primijetite da element ostaje u normalnom tijeku dokumenta i da se pomak primjenjuje u odnosu na njega samog. Uzmite to na znanje dok prelazimo na druge vrijednosti.
Apsolutno
Elementi s position: absolutepozicionirani su u odnosu na roditeljske elemente. U tom se slučaju element uklanja iz uobičajenog tijeka dokumenata. Ostali će se elementi ponašati kao da tog elementa nema u dokumentu. Za element u izgledu stranice nije stvoren prostor. Vrijednosti lijevo, gore, dolje i desno određuju konačni položaj elementa.
Treba napomenuti da je element s position: absolutepozicioniran u odnosu na svog najbližeg pozicioniranog pretka. To znači da nadređeni element mora imati vrijednost položaja različitu od position: static.
Ako najbliži nadređeni element nije pozicioniran, pozicioniran je u odnosu na sljedeći nadređeni element koji je pozicioniran. Ako nema pozicioniranog elementa pretka, pozicioniran je u odnosu na element.
Vratimo se našem primjeru. U tom slučaju mijenjamo položaj glavnog elementa u position: absolute. Njegovom nadređenom elementu također ćemo dati relativan položaj tako da se ne postavi u odnosu na element.
.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; } Evo rezultata.
Primijetite da u dokumentu nije stvoren prostor za element. Element je sada pozicioniran u odnosu na nadređeni element. Uzmite to na znanje dok prelazimo na sljedeću vrijednost.
Fiksno
Elementi s fiksnim položajem slični su apsolutno pozicioniranim elementima. Oni su također uklonjeni iz uobičajenog tijeka dokumenta. Ali za razliku od apsolutno pozicioniranog elementa, oni su uvijek postavljeni u odnosu na element.
Treba napomenuti da pomicanje ne utječe na fiksne elemente. Oni uvijek ostaju u istom položaju na ekranu.
.main-element { position: fixed; bottom: 10px; left: 10px; background-color: yellow; padding: 10px; } html { height: 800px; }U ovom je slučaju element pozicioniran u odnosu na element. Pokušajte pomicati kako biste vidjeli da se element fiksira na zaslonu.
Prijeđimo na konačnu vrijednost.
Ljepljiv
position: stickyje mješavina position: relativei position: fixed. Djeluje poput relativno pozicioniranog elementa do određene točke pomicanja, a zatim djeluje poput fiksnog elementa. Ne bojte se ako ne razumijete što to znači, primjer će vam pomoći da to bolje razumijete.
.main-element { position: sticky; top: 10px; background-color: yellow; padding: 10px; } .parent-element { position: relative; height: 800px; padding: 50px 10px; background-color: #81adc8; }Pomaknite se na karticu rezultata da biste vidjeli rezultat. Vidite da djeluje kao relativni element dok ne dođe do određene točke na zaslonu, top: 10pxa zatim stigne tamo poput fiksnog elementa.
Sažetak
Ups! To je bila prava vožnja. Ali doista se nadam da vam je ovaj članak pomogao da razumijete svojstvo položaja CSS i kako to funkcionira.
Feel free to play around with the fiddles if you don't fully understand any of them. You can change the values and notice the difference or better still, try to use the position property to work on a personal project.
Remember that getting better at CSS takes constant practice. So keep practicing and you'll get better.
Want to get notified when I publish a new article? Click here.