Css position elementi eski yapılan tasarımlarda pek olmasa artık gunumuzun web sitelerinde olmazsa olmaz ozelliklerinden biridir yani eski web sitelerimizde sıralı divler (yanyana divler) kullanırken artık bağımsız divler kullanıyoruz. İlk başlarda position kullanmaya cekinirdim tarayıcılar arasında sorunlar yaratır diye ama kullanmaya başladıktan sonra gordum ki position kullanmak daha basit ve kullanımı kolay.

Benim makale anlayışım ornekler yapmak ve sizlere ornekler gostermektir o yuzden hemen orneklere geciyorum.
Şimdiki ornekte 3 tane kutu oluşturalım ve bir kutumuzu diğer kutulardan bağımsız yapalım, oluşturduğum kutuların gorunumu ve kodları.


Css kodları ;

Kod:
.kutu .kutuBir .kutuIki .kutuUc


Html Kodları ;

Kod:






Gormuş olduğunuz bu kutular float:left; komutu ile yan yana sıralanmış kutulardır. şimdi ucuncu kutuya position:absolute ozelliğini verelim ve neler olacak gorelim.

position:absolute;

Kod:
.kutuUc




Aaa ne bicim birşey oldun sen oyle sadece position absolute verdik ve kutumuz uctu gitti. Bunun anlamı acıklayacak olursak ;

Eğer kutuUc class ’ımıza sadece position:absolute komutunu verirsek top ve left komutları otomatik olarak 0 değeri alır ve bir ustteki div ’i de position:relative; olarak değerlendirir bu yuzden bulunduğu div ’in sol ust başlangıc noktasına gider. Ama biz kutuUc divimizi istediğimiz yere koymak istiyoruz o yuzden left: ve top: komutlarına değerler vereceğiz

position:absolute; top:50px; left:300px;

kutuUc ’un class ’ına bu position:absolute; top:50px; left:300px; değerini verdik burada top değeri sayfanın en tepesinden başlar , left değeri ise sayfanın en solundan başlar



Css kodları ;


Kod:
.kutuUc

Resimde de gorduğunuz gibi kutumuz bizim belirlediğimiz değerlere gore yer değiştirdi.

Kısa yollar:

Eğer div ’i direk sayfanın soluna yerleştirmek istiyorsan left:0; komutunu ust tarafa yapıştırmak istiyorsak top:0; sağ tarafa yerleştirmek istiyorsak right:0; aşağıya yapıştırmak istiyorsak bottom:0; komutunu uygulamalıyız.

Position: relative;

Bence en onemli kısım burasıdır yani Position:relative. Relative komutu ilişkilendirme komutudur yani

kutuUc ’u kutu div ile ilişkilendiriyoruz ve kutuUc div ’inin başlangıc noktaları kutu div ’i ile başlıyor.

Hemen bir ornekte bu komut icin verelim kutuUc div ’inin bir ustundeki yani onu icine alan div ’e position:relative; değerini vereceğiz sonra ise biz gene
kutuUc div ’i ile uğraşarak yerleştirmemizi yapacağız.

Css kodları ;


Kod:
.kutu .kutuUc




Resimden de anlaşılacağı gibi kutu div ’inin sol tarafından 40px ust tarafından 30px verdik ve kutuUc divini kutu div ’i ile ilişkilendirerek istediğimiz yere getirdik.

Position:fixed;
Position fixed verdiğimiz div cakılı bir şekilde orada kalıyor hic bir şekilde oynama yapmıyor.Ama bu ozelliği ie6 ve ie7 desteklemiyor.

Position komutlırından benim kullandığım ozellikler bunlar geri kalan static inherit gibi değerleri benim işime yaramıyor yakında position ile yapılmış kod orneklerini bu sayfadan paylaşacağım.

Kutu renklendirmesi icin Umut Candan‘a teşekkurler : )

Bu makale Aycan BULBUL tarafından aycan.net icin yazılmıştır.
Kaynak gostermenden yayımlamak yasaktır.

Css Position nedir? nasıl kullanılır? | Aycan.net