CSS'te öğelerin konumlandırma seçenekleri nelerdir?

CSS'te öğelerin konumlandırılması için birkaç temel seçenek vardır:

• static — varsayılan konumlandırma. Öğeler belge akışında yer alır, kaydırma veya kayma olmadan.
• relative — öğe normal konumuna göre konumlandırılır. top, left, bottom, right kullanılarak kaydırılabilir, yine de akışta yer tutar.
• absolute — öğe en yakın konumlandırma farklı static olan ata öğeye göre konumlandırılır (veya yoksa pencereye göre). Öğeyi akıştan çıkarır.
• fixed — öğe tarayıcı penceresine göre sabitlenir ve kaydırma sırasında hareket etmez. Ayrıca akıştan çıkar.
• sticky — öğe, kaydırma sırasında belirli bir konuma ulaşana kadar relative gibi davranır, sonra fixed gibi davranır.

Konumlandırmanın yanı sıra, öğeleri düzenlemek için sıkça kullanılanlar:

• Flexbox — tek boyutlu (sıra veya sütun) öğeler arasında hizalama ve alan dağılımı için esnek model.
• Grid — satır ve sütunlara göre öğeleri yerleştirmek için iki boyutlu ızgara modeli.
• float — eski bir öğe sarmalama yöntemi, genellikle kolonlar oluşturmak için kullanılır, günümüzde daha az tercih edilir.

Position kullanımı örneği:

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