A CSS pozíció tulajdonság példákkal magyarázva

Mielőtt igazán jó tudna lenni a CSS-ben, meg kell értenie az alapokat. Meg kell értenie a CSS tulajdonságait és azok értékeit.

Ebben a cikkben a CSS position tulajdonságra fogunk koncentrálni. Megtanuljuk a CSS pozíció tulajdonság különféle értékeit és működését. Csináljuk!

Mi a CSS pozíció tulajdonság?

A CSS position tulajdonság meghatározza az elem helyét a dokumentumban. Ez a tulajdonság a bal, a jobb, a felső, az alsó és a z-index tulajdonságokkal működik együtt egy elem végső helyzetének meghatározásához az oldalon.

A pozíció tulajdonság öt értéket vehet fel. Ők:

  1. statikus
  2. relatív
  3. abszolút
  4. rögzített
  5. ragadós

Beszéljük meg mindegyiket.

Statikus

Ez az elemek alapértelmezett értéke. Az elem a dokumentum normál áramlása szerint helyezkedik el. A bal, jobb, felső, alsó és z-index tulajdonságok nem befolyásolják a elemet position: static.

Használjunk egy példát annak bemutatására, position: staticamely nincs hatással egy elem helyzetére. Három div van elhelyezve egy szülőtartályban. Ezt a példát a cikk egészében felhasználjuk.

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

Tegyük hozzá position: statica div-hez az osztállyal main-elementés a bal felső értékekkel. Néhány stílust is hozzáadunk a többi div-hez, hogy megkülönböztessük őket a fókuszban lévő elemtől.

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

Ez az eredmény.

Észrevette, hogy nincs változás? Ez megerősíti azt a tényt, hogy a bal és az alsó tulajdonságok nem befolyásolják a elemet position: static.

Lépjünk a következő értékre.

Relatív

A (z) elemek position: relativea dokumentum normál folyamatában maradnak. De a statikus elemektől eltérően a bal, jobb, felső, alsó és z-index tulajdonságok befolyásolják az elem helyzetét. A bal, jobb, felső és alsó tulajdonságok alapján eltolást alkalmazunk az elemre önmagához képest.

Nézzük cserélni position: statica position: relativepéldánkban.

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

Vegye figyelembe, hogy a bal és az alsó tulajdonságok most befolyásolják az elem helyzetét. Vegye figyelembe azt is, hogy az elem a dokumentum normál folyamatában marad, és az eltolást önmagához képest alkalmazzák. Tudomásul veszi ezt, amikor áttérünk más értékekre.

Abszolút

A (z) elem position: absolutea szülőelemeihez képest helyezkedik el. Ebben az esetben az elem eltávolításra kerül a normál dokumentumfolyamatból. A többi elem úgy fog viselkedni, mintha ez az elem nem szerepelne a dokumentumban. Az oldalelrendezésben nincs létrehozva hely az elem számára. A bal, a felső, az alsó és a jobb oldali értékek határozzák meg az elem végső helyzetét.

Egy dolgot meg kell jegyezni, hogy egy elem, position: absoluteamellyel a legközelebb elhelyezkedő őséhez viszonyítva helyezkedik el. Ez azt jelenti, hogy a szülő elemnek nem a pozíció értékének kell lennie position: static.

Ha a legközelebbi szülő elem nincs elhelyezve, akkor a következő elhelyezett szülő elemhez viszonyítva helyezkedik el. Ha nincs pozicionált őselem, akkor az az elemhez viszonyítva helyezkedik el .

Térjünk vissza a példánkra. Ebben az esetben a fő elem helyzetét megváltoztatjuk position: absolute. A szülőelemnek viszonylagos helyzetet is adunk, hogy az ne kerüljön az elemhez képest.

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

Itt az eredmény.

Figyelje meg, hogy a dokumentumban nem jött létre hely az elem számára. Az elem most a szülőelemhez képest helyezkedik el. Vegye tudomásul ezt, amikor a következő értékre lépünk.

Rögzített

A rögzített helyzetű elemek hasonlóak az abszolút helyzetben lévő elemekhez. Ezeket a dokumentum normál folyamatából is eltávolítják. De az abszolút pozícionált elemtől eltérően, mindig az elemhez képest helyezkednek el .

Egy dolgot meg kell jegyezni, hogy a rögzített elemeket nem befolyásolja a görgetés. Mindig ugyanabban a helyzetben maradnak a képernyőn.

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

Ebben az esetben az elem az elemhez viszonyítva helyezkedik el . Próbáljon görgetni, hogy az elem rögzüljön a képernyőn.

Térjünk át a végső értékre.

Ragadós

position: stickyegy mix position: relativeés position: fixed. Úgy viselkedik, mint egy viszonylag pozícionált elem egy bizonyos görgetési pontig, majd fix elemként működik. Ne féljen, ha nem érti, mit jelent ez, a példa segít jobban megérteni.

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

Görgessen az eredmény fülön az eredmény megtekintéséhez. Látja, hogy relatív elemként működik, amíg el nem jut a képernyő egy bizonyos pontjáig, top: 10pxmajd ugyanúgy odaér, ​​mint egy rögzített elem.

Összegzés

Hoppá! Ez elég nagy út volt. De nagyon remélem, hogy ez a cikk segített megérteni a CSS pozíció tulajdonságát és működését.

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.