CSS Kutu Pozisyonunun Ayarlanması

CSS kutu pozisyonu, bir HTML öğesinin düzen içindeki konumunu belirlemek için kullanılır. İşte temel kutu pozisyonu ayarları:

1. Static Pozisyon:

   • Öğelerin normal akışa göre yerleştirildiği varsayılan pozisyondur. position: static; ile belirtilir.

   div {
     position: static;
   }
   

2. Relative Pozisyon:

   • Bir öğe, normal akışa göre yerleştirilirken, kendisine göre bir önceki konumuna göre ayarlanır. position: relative; ile belirtilir.

   div {
     position: relative;
     top: 10px; /* Yukarıda 10 piksel kaydır */
     left: 20px; /* Sola 20 piksel kaydır */
   }
   

3. Absolute Pozisyon:

   • Bir öğe, normal akıştan çıkar ve en yakın pozisyonlu (position değeri relative, absolute, veya fixed olan) üst öğeye göre konumlanır. position: absolute; ile belirtilir.

   div {
     position: absolute;
     top: 50px;
     left: 100px;
   }
   

4. Fixed Pozisyon:

   • Bir öğe, normal akıştan çıkar ve tarayıcı penceresine göre konumlanır. Sayfa scroll edilse bile konumu sabit kalır. position: fixed; ile belirtilir.

   div {
     position: fixed;
     top: 0;
     left: 0;
   }
   

5. Sticky Pozisyon:

   • Bir öğe, normal akış içinde bulunurken belirli bir kaydırma noktasına (threshold) gelindiğinde sabitlenir. position: sticky; ile belirtilir.

   div {
     position: sticky;
     top: 20px; /* Öğe belirli bir noktaya geldiğinde sabitlenir */
   }
   

Bu pozisyon özellikleri, sayfa düzeninizi daha iyi kontrol etmenizi sağlar. Hangi pozisyon özelliğini kullanacağınız, tasarım hedeflerinize ve ihtiyaçlarınıza bağlı olarak değişebilir.