Css Position nedir? nasıl kullanılır?

Css position elementi eski yapılan tasarımlarda pek olmasa artık günümüzün web sitelerinde olmazsa olmaz özelliklerinden 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 çekinirdim tarayıcılar arasında sorunlar yaratır diye ama kullanmaya başladıktan sonra gördüm ki position kullanmak daha basit ve kullanımı kolay.

Benim makale anlayışım örnekler yapmak ve sizlere örnekler göstermektir o yüzden hemen örneklere geçiyorum.
Şimdiki örnekte 3 tane kutu oluşturalım ve bir kutumuzu diğer kutulardan bağımsız yapalım, oluşturduğum kutuların görünümü ve kodları.

Css kodları ;

.kutu {
    width: 260px;
    overflow: hidden;
    background: #e2e2e2;
    padding: 10px;
}

.kutuBir {
    width: 50px;
    height: 50px;
    background: #BDBDBD;
    float: left;
    margin: 10px;
}

.kutuIki {
    width: 60px;
    height: 60px;
    background: #889B7F;
    float: left;
    margin: 10px;
}

.kutuUc {
    width: 70px;
    height: 70px;
    background: #B98F91;
    float: left;
    margin: 10px;
}

.kutu {

width: 260px;

overflow: hidden;

background: #e2e2e2;

padding: 10px;

}

.kutuBir {

width: 50px;

height: 50px;

background: #BDBDBD;

float: left;

margin: 10px;

}

.kutuIki {

width: 60px;

height: 60px;

background: #889B7F;

float: left;

margin: 10px;

}

.kutuUc {

width: 70px;

height: 70px;

background: #B98F91;

float: left;

margin: 10px;

}

Html Kodları ;

<div class="kutu">
    <div class="kutuBir"></div>
    <div class="kutuIki"></div>
    <div class="kutuUc"></div>
</div>

</div>

Görmüş olduğunuz bu kutular float:left; komutu ile yan yana sıralanmış kutulardır. şimdi üçüncü kutuya position:absolute özelliğini verelim ve neler olacak görelim.

position:absolute;

.kutuUc{width: 70px; height: 70px; background: #B98F91;float:left; margin: 10px; position:absolute;}

1	.kutuUc{width: 70px; height: 70px; background: #B98F91;float:left; margin: 10px; position:absolute;}

Aaa ne biçim birşey oldun sen öyle sadece position absolute verdik ve kutumuz uçtu gitti. Bunun anlamı açı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 üstteki div’i de position:relative; olarak değerlendirir bu yüzden bulunduğu div’in sol üst başlangıç noktasına gider. Ama biz kutuUc divimizi istediğimiz yere koymak istiyoruz o yüzden left: ve top: komutlarına değerler vereceğiz

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

kutuUc’ün 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ı ;

.kutuUc {
    width: 70px;
    height: 70px;
    background: #B98F91;
    float: left;
    margin: 10px;
    position: absolute;
    top: 50px;
    left: 300px;
}

.kutuUc {

width: 70px;

height: 70px;

background: #B98F91;

float: left;

margin: 10px;

position: absolute;

top: 50px;

left: 300px;

}

Resimde de gördüğünüz gibi kutumuz bizim belirlediğimiz değerlere göre yer değiştirdi.

Kısa yollar:

Eğer div’i direk sayfanın soluna yerleştirmek istiyorsan left:0; komutunu üst 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 önemli kısım burasıdır yani Position:relative. Relative komutu ilişkilendirme komutudur yani

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

Hemen bir örnekte bu komut için verelim kutuUc div’inin bir üstündeki yani onu içine 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ı ;

.kutu {
    width: 260px;
    overflow: hidden;
    background: #e2e2e2;
    padding: 10px;
    position: relative;
}

.kutuUc {
    width: 70px;
    height: 70px;
    background: #B98F91;
    float: left;
    margin: 10px;
    position: absolute;
    top: 30px;
    left: 40px;
}

.kutu {

width: 260px;

overflow: hidden;

background: #e2e2e2;

padding: 10px;

position: relative;

}

.kutuUc {

width: 70px;

height: 70px;

background: #B98F91;

float: left;

margin: 10px;

position: absolute;

top: 30px;

left: 40px;

}

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

Position:fixed;

Position fixed verdiğimiz div çakılı bir şekilde orada kalıyor hiç bir şekilde oynama yapmıyor.Ama bu özelliği ie6 desteklemiyor.

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

Kutu renklendirmesi için Umut Candan‘a teşekkürler : )

Post Views: 40.794