Millised on elementide positsioneerimise võimalused CSS-is?

CSS-is on mitu peamist võimalust elementide positsioneerimiseks:

• static — vaikimisi positsioneerimine. Elementid paiknevad dokumendi voolus, ilma nihketa.
• relative — element positsioneerub oma normaalse asukoha suhtes. Seda saab nihutada kasutades top, left, bottom, right, säilitades selle koha voolus.
• absolute — element positsioneerub lähima mitte-static vanema suhtes (või akna suhtes, kui sellist ei ole). Element eemaldatakse voolust.
• fixed — element on fikseeritud brauseri akna suhtes ja ei liigu kerimisel. Samuti eemaldatakse voolust.
• sticky — element käitub nagu relative kuni saavutab määratud positsiooni kerimisel, pärast seda nagu fixed.

Lisaks positsioneerimisele kasutatakse sageli elementide paigutamiseks:

• Flexbox — paindlik mudel ühe mõõtme elementide joondamiseks ja jaotamiseks.
• Grid — kahe mõõtmega võrgumudel elementide asetamiseks ridade ja veergude kaupa.
• float — vananenud meetod elementide ümbritsemiseks, varem kasutati veerude loomiseks, nüüd vähem.

Näide position kasutamisest:

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