Kādi ir elementu pozicionēšanas varianti CSS?

CSS ir ir vairākas galvenās iespējas elementu pozicionēšanai:

• static — noklusējuma pozicionēšana. Elementi izvietoti dokumenta plūsmā, bez novirzēm.
• relative — elements tiek pozicionēts attiecībā uz savu normālo pozīciju. To var pārvietot, izmantojot top, left, bottom, right, saglabājot vietu plūsmā.
• absolute — elements tiek pozicionēts attiecībā uz tuvāko vecāku ar citu nekā static pozīciju (vai uz loga, ja tādu nav). Elements iziet no plūsmas.
• fixed — elements ir fiksēts attiecībā uz pārlūkprogrammas logu un nemainās, ritinot lapu. Arī iziet no plūsmas.
• sticky — elements uzvedas kā relative, līdz sasniedz noteiktu pozīciju lapas ritināšanas laikā, pēc tam kā fixed.

Papildus pozicionēšanai, elementu izvietošanai bieži izmanto:

• Flexbox — elastīgs modelis vienas dimensijas elementu izlīdzināšanai un sadalīšanai.
• Grid — divdimensiju režģa modelis elementu izvietošanai rindās un kolonnās.
• float — novecojusi metode elementu apvijšanai, agrāk izmantota kolonnu veidošanai, tagad retāk.

Piemērs position izmantošanai:

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