Какви са вариантите за позициониране на елементите в CSS?

В CSS има няколко основни варианта за позициониране на елементите:

• static — позициониране по подразбиране. Елементите се разполагат в потока на документа, без измествания.
• relative — елементът се позиционира спрямо своето нормално положение. Може да се измести с top, left, bottom, right, като запазва мястото си в потока.
• absolute — елементът се позиционира спрямо най-близкия предшественик с различно от static позициониране (или спрямо прозореца, ако няма такъв). Извежда се от потока.
• fixed — елементът е фиксиран спрямо прозореца на браузъра и не се движи при скролиране. Също излиза от потока.
• sticky — елементът се държи като relative, докато не достигне зададена позиция при скролиране, след което като fixed.

Освен позициониране, за разположение на елементите често се използват:

• Flexbox — гъвкава модел за подравняване и разпределение на пространството между елементите в една измерение (ред или колона).
• Grid — двумерен модел на мрежа за разполагане на елементите по редове и колони.
• float — остарял начин за обвиване на елементи, често използван за създаване на колони, сега по-рядко.

Пример за използване на position:

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