Kokios yra elementų pozicionavimo galimybės CSS?

CSS yra keletas pagrindinių elementų pozicionavimo būdų:

• static — numatytasis pozicionavimas. Elementai išsidėsto dokumento sraute, be perkėlimų.
• relative — elementas yra pozicionuojamas pagal savo įprastą vietą. Jį galima perkelti naudojant top, left, bottom, right, išlaikant jo vietą sraute.
• absolute — elementas yra pozicionuojamas pagal artimiausią tėvą su kita nei static pozicija (arba lango atžvilgiu, jei tokių nėra). Elementas ištraukiamas iš srauto.
• fixed — elementas yra fiksuotas lango atžvilgiu ir nesikeičia scroll metu. Taip pat ištraukiamas iš srauto.
• sticky — elementas elgiasi kaip relative, kol nepasiekia nustatytos pozicijos scroll metu, po to kaip fixed.

Be pozicionavimo, dažnai naudojami:

• Flexbox — lankstus modelis vienos dimensijos elementų išlygiavimui ir paskirstymui.
• Grid — dviejų dimensijų tinklelis elementų išdėstymui pagal eilutes ir stulpelius.
• float — pasenęs būdas apvynioti elementus, anksčiau naudotas stulpelių kūrimui, dabar rečiau.

Pavyzdys naudojant position:

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