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;}

Html Kodları ;

<div class="kutu">
       <div class="kutuBir"></div>
       <div class="kutuIki"></div>
       <div class="kutuUc"></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;}

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;}

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; margin: 0px auto; 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 ve ie7 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 : )

Bu makale Aycan BÜLBÜL tarafından aycan.net için yazılmıştır.
Kaynak göstermenden yayımlamak yasaktır.

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

çok güzel anlatmışsın eyvallah.

pozisyonlamayı ie6 da kullanırken çok dikkatli olmak gerekiyor, bambaşka yorumluyor özellikle z-index kullanılıyorsa.

Teşekkürler Emre.

Genelde bütün tasarımlarımız katman katmandır ve position ve z-index her tasarımımızda var ama hiç sorun yaşamadım eğer sorun yaşadığınız yeri söylerseniz belki bir yerde hata yapıyorsunuzdur.

Explorer bütün pozisyonlanmış elemanlara bir z-index veriyor, ve bu ana elemanın içindeki bir alt elemanın z-indexi, ana elemanı asla geçemiyor, durum böyle oluncada, birden fazla sayıda iç içe pozisyonlanmış elemanlarda sorunlar yaşanabiliyor. Bu sorunlar bir şekilde aşılabiliyor elbet ama, üstesinden javascript veya iframe kullanmadan gelinemeyecek bir sorunu var explorer ve pozisyonlama mevzusunun, o da istediğiniz kadar z-index verin asla bir <select><option></option></select> elemanının üstüne bir katmanla geçemiyor oluşunuz. Bu sorunu çözmek için bildiğiniz bir css çözümü varsa vakit kaybetmeden bütün dünyayla paylaşmalısınız bence

Kolay gelsin..

Anladığım kadarıyla şunu diyorsunuz ;

<div class="aycan">
    <div class="paydayin"></div>
</div>

burada paydayin div ine ne kadar düşük z index verirsekte aycan divinin üstünde duracaktır her zaman. Çünki bu böyle olmalıdır ki jquery'de bir kod ile istediğimiz blokları kapatalım

Sizin select dediğin sorunda buydu sanırsam ?

  <div class="aycan">  </div>
  <select class="select">
      <option>a</option>
      <option>a</option>
      <option>a</option>
  </select>

.aycan{width: 99%; height: 100%; position: absolute; z-index: 3; top:0; left:0; background: #333333;}
.select{width: 400px; height: 300px; position: absolute; z-index: 2; left: 30%;  margin:100px auto;background: #fff;}

Burada önemli olan select değildir iç içe olan katmanlarda en dıştaki aycan classıen alt değerlidir ve onun altına değer gelmez bildiğim kadarıyla. Buradada select ve aycan div'ini bağımsız bir şekilde istediğim şekilde sıralayabilirim.

Burada zaten aycan ve paydayin birer divseler, aralarındaki z-index sorunu bir şekilde çözülür, ancak select için verdiğiniz örnek ie6'da saf css ile çözülemez, yani;

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#content{
	width:900px;
	margin:0 auto;
	background:#CCC;
	height:600px;
}
.aycan {
	width:500px;
	height:500px;
	float:left;
	position:absolute;
	background:#900;
	z-index:1000000000000;/*z-index sonsuz da olsa*/
}
select.paydayin{
	width:300px;
}
</style>
</head>

<body>
<div id="content">
    <div class="aycan">
    </div>
    <select class="paydayin">
    	<option>paydayin1</option>
        <option>paydayin2</option>
    </select>
</div>
</body>
</html>

buradaki select.paydayin class'ının içine ne yazarsak yazalım, explorer 6'da aycan divi select.paydayin adındaki combo box'ımızın üstünü örtemez. Bu sorunun çözümü ie6'nın tamamen yok olması, ya da bir iki satır javascript kodu olabilir

Guzel anlatim olmus

Demek istediğiniz şimdi anladım Js kodu buradadır.

Teşekkürker MuGi.