CSS İle Pozisyon Konumlandırma (9. Ders Position Relative Kullanımı)
Css ile alanlarımızda düzenlemeler yaparken position özelliğini kullanırız position özelliğinin 4 farklı değeri vardır; Static, Relative, Absolute, Fixed değerlerini alarak çeşitli konumlamalar elde edebiliriz. Position Kullanımı iyi kavrayabilmeniz için 4 ayrı ders halinde anlatmaya çalışacağız.
Position: Relative; Kullanımı
Position:Relative; özelliğini kullandığımız alanlara bağımsızlık özelliğini vermiş oluyoruz örnekte de göreceğiniz gibi Relative değeri vermiş olduğumuz alana istediğimiz gibi top, bottom, left, right gibi konumlandırmalar ile alanımızı istediğimiz yere konumlandırabiliriz. Position özelliğinin mantığını mutlaka kavramamız gerekiyor ilerleyen derslerde de bolca bu özelliği kullanacağız.
Örnekte gördüğünüz gibi alanların float:left ile sıralanmış şekilde bir düzeni var bu düzenden farklı olarak bir işlem yapmak için relative4 alanımıza position: relative; özelliğini vererek left: 25px; komutumuz ile alanımızın solunda bulunda alan ile arasında 25px genişliğinde bir boşlukla başlamasını ve top: 25px; komutumuz ile de alanımızın yukarıdan aşağıya 25px yüksekliğinde bir boşlukla konumlanmasını istedik. Umarım yararlı bir ders olmuştur kafanıza takılan soruları yorumlarda belirtebilirsiniz.
Not: Relative özelliğini kullandığımda kimi zaman z-index özelliğini de kullanmamız gerekebiliyor bunun için ilerleyen derslerdeki z-index dersini de iyi kavramanız da yarar vardır.