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; } 

   Canlı Dene Kopyala

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 */ } 

   Canlı Dene Kopyala

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; } 

   Canlı Dene Kopyala

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; } 

   Canlı Dene Kopyala

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 */ } 

   Canlı Dene Kopyala

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.