Milyen pozícionálási lehetőségek vannak a CSS-ben?

A CSS-ben több fő lehetőség van az elemek pozícionálására:

• static — alapértelmezett pozíció. Az elemek a dokumentum folyamatában helyezkednek el, elmozdítás nélkül.
• relative — az elem a normál pozíciójához képest van pozícionálva. A top, left, bottom, right segítségével mozgatható, miközben helyet foglal a folyamatban.
• absolute — az elem a legközelebbi, nem static pozíciójú szülőhöz képest van pozícionálva (vagy az ablakhoz, ha nincs ilyen). Kivonódik a folyamatból.
• fixed — az elem az ablakhoz képest rögzített, nem mozdul a görgetés során. Szintén kivonódik a folyamatból.
• sticky — az elem relative-ként viselkedik, amíg el nem éri a megadott pozíciót görgetés közben, utána fixed-ként.

A pozícionálás mellett az elemek elrendezéséhez gyakran használják:

• Flexbox — rugalmas modell az elemek igazítására és elosztására egy dimenzióban (sor vagy oszlop).
• Grid — kétdimenziós rácsmodell az elemek sorokba és oszlopokba rendezéséhez.
• float — elavult módszer az elemek körüljárására, korábban oszlopok létrehozására használták, ma kevésbé gyakori.

Példa a position használatára:

.element {
  position: absolute;
  top: 10px;
  left: 20px;
}