CSS Göreli Konumlandırma
- Önceki Sayfa CSS Konumlandırma Özeti
- Sonraki Sayfa CSS Absolüt Konumlandırma
Göreli konumlandırma ayarlanan element çerçeveleri belirli bir mesafeye kayar. Element, konumlandırılmadan önceki şeklini korur ve原本占用的空间仍然保留。
CSS Göreli Konumlandırma
Göreli konumlandırma oldukça kolay bir kavramdır. Bir elemente göreli konumlandırma uygulanırsa, o elementin bulunduğu konumda görünür. Daha sonra, bu elementin yatay veya dikey konumunu ayarlayarak, bu elementin başlangıç noktasına göre hareket ettirilebilir.
Topu 20px olarak ayarlanırsa, çerçeve eski konumunun üstünde 20 pixel altında yer alır. Solu 30 pixel olarak ayarlanırsa, elementin solunda 30 pixel boşluk oluşturulur, yani element sağa doğru hareket ettirilir.
#box_relative {
position: relative;
left: 30px;
top: 20px;
}
Aşağıdaki resimde gösterildiği gibi:
Dikkat edin, görece konumlandırma kullanılırken, hareket edilip edilmez, element hala eski konumunda yer alır. Bu nedenle, elementin hareket ettirilmesi, onun diğer çerçeveleri kaplamasına neden olabilir.
CSS Göreli Konumlandırma Örneği
- Konumlandırma: Göreli Konumlandırma
- Bu örnek, bir elementin normal konumuna göre nasıl konumlandırılacağını gösterir.
- Önceki Sayfa CSS Konumlandırma Özeti
- Sonraki Sayfa CSS Absolüt Konumlandırma
