Salı , Haziran 27 2017
Anasayfa / DERSLER / Web Tasarım Dersleri / CSS Dersleri / CSS İle Pozisyon Konumlandırma (9. Ders Position Relative Kullanımı)

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.

Bu Kodların Ön İzlemesine Buradan Bakabilirsiniz

Ö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.

Hakkında BilgeBank

İlgili Makale

html menü

CSS İle Açılır Menü Yapımı (12. Ders Açılır Menü)

Css ile açılır menü yapımını adım adım resimli bir şekilde nasıl yapıldığını anlatmaya çalışacağım olayın  mantığını …

Bir Cevap Yazın