Az elemek CSS-sel történő elhelyezése a webfejlesztésben nem olyan egyszerű, mint amilyennek látszik. A dolgok gyorsan bonyolulttá válhatnak, ha a projekt nagyobb lesz, és anélkül, hogy jól megértenéd, hogy a CSS hogyan foglalkozik a HTML elemek igazításával, nem fogod tudni kijavítani az igazítási problémákat.
Az elemek tiszta CSS-sel történő pozícionálására többféle módszer / módszer létezik. A CSS float használatával a megjelenítés és a pozíció tulajdonságai a leggyakoribb módszerek.
Ebben a cikkben elmagyarázom az elemek és a tiszta CSS összehangolásának egyik legzavarosabb módját: a position tulajdonságot. Van még egy oktatóm a CSS Display Property-ről.
Ha szeretné, megnézheti a CSS Positioning Tutorial videó verzióját:
Kezdjük...
CSS pozíció és segítő tulajdonságai
Tehát a Position tulajdonságnak 5 fő értéke van :
position: static | relative | absolute | fixed | sticky
és további tulajdonságok az elem koordinátáinak beállításához (ezeket hívom "segítő tulajdonságoknak" ):
top | right | bottom | left És a z-index
Mi ez a z-index?
Magasságunk és szélességünk (x, y) két dimenzióként szerepel. Z a 3. dimenzió. A weboldal egyik eleme más elemek elé kerül, amikor az z-indexértéke növekszik.
position: staticdeklarált pozícióval,
sem anélkül.
A csatornámon megtekintheted a videót, hogy lássa, hogyan használhatod részletesebben a z-indexet :
Most térjünk rá a helyzetben ingatlan értéke ...
1. Statikus
position: staticaz alapértelmezett érték . Akár deklaráljuk, akár nem, az elemek normál sorrendben helyezkednek el a weboldalon. Mondjunk egy példát:
Először meghatározzuk a HTML struktúránkat:
Ezután létrehozunk 2 mezőt, és meghatározzuk szélességüket, magasságukat és helyzetüket:
.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 }
Amint a képen láthatjuk, a helyzet meghatározása : statikus vagy nem, semmi különbséget nem jelent.A dobozok a normál dokumentumfolyamatnak megfelelően vannak elhelyezve .
2. Rokon
position: relative: Egy elem új helyzete a normál helyzetéhez képest.
Kezdve position: relativeés nem statikus helyzetbenértékek, képesek vagyunk megváltoztatni egy elem alapértelmezett helyzetét a fent említett segítő tulajdonságok használatával .
Mozgassuk a narancssárga négyzetet a kék mellé.
.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 }
MEGJEGYZÉS: A pozíció: relatív elem használata nem befolyásolja más elemek helyzetét.
3. Abszolút
Be position: relativeaz elem önmagához képest helyezkedik el. Azonban egy abszolút lyelhelyezett elem a szülőjéhez viszonyítva .
A (z) elemet position: absoluteeltávolítja a normál dokumentumfolyamatból. Automatikusan a szülőelem kezdőpontjába ( bal felső sarkába) kerül. Ha nincs szülőeleme, akkor a kezdeti dokumentum lesz a szülője.
Mivel position: absoluteeltávolítja az elemet a dokumentumfolyamatból, a többi elem érintett, és úgy viselkedik, ahogy az elemet teljesen eltávolítják a weboldalról.
Adjunk hozzá egy konténert szülőelemként:
.box-orange { position: absolute; background: orange; width: 100px; height: 100px; }
Most úgy tűnik, hogy a kék doboz eltűnt, de mégsem. A kék doboz úgy viselkedik, mintha a narancssárga dobozt eltávolítanák, így az a narancssárga doboz helyére tolódik.
Mozgassuk a narancssárga négyzetet 5 pixellel:
.box-orange { position: absolute; background: orange; width: 100px; height: 100px; left: 5px; top: 5px; }
Az abszolút helyzetben lévő elem koordinátái a szülőjéhez viszonyítva vannak , ha a szülőnek is van nem statikus pozíciója. Ellenkező esetben a segítő tulajdonságai az elemet a kezdőponthoz viszonyítva helyezik el.
.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. Javítva
Hasonlóan a position: absoluterögzített helyzetű elemek is eltávolításra kerülnek a normál dokumentumfolyamatból. A különbségek a következők:
- Ezek csak viszonylagos a dokumentum nem más szülők.
- A görgetés nem érinti őket .
.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 }Itt a példa, tudom megváltoztatni a narancssárga doboz helyzetben rögzített , és ezúttal is relatív 5px a jogot a, nem a szülője (konténere) :
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!