21.08.2013          

               DİSPLAY NEDİR? NASIL KULLANILIR?

Seçili elemanların tasarımının akışında nasıl etkiler vereceğimizi belirlememizi sağlar.

Aldığı değerlerè

Display:none : Bir elemanın display özelliğine none değeri verdiğimizde  eleman görünmez olur.

Display:inline : Bu değerde elemanlar blok elemanı olarak davranır. Örneğin paragraflar yan yana sıralanır.

Display:block : Bu değerde elemanlar blok elemanı olarak davranır.

Display:listitem : HTML<li> elementleri gibi blok halinde bulunan satır içi öğeler barındıran öğeler üretmek için kullanılır.

Display:inline-block : Bu özellikle ise aynı anda hem blok hem satır içi öğeler üretmek için kullanılır.

Display:run-in :  Bu kodumuz satır bitişini en üste taşır ama tarayıcılıarda çok fark gösterir.

POZİTİON NEDİR?  NASIL KULLANILIR?

CSS aynı zamanda HTML elementlerinin diğer elementlere göre konumunu belirlemenizi sağlar. Bir HTML elementini diğerinin altına ya da üstüne alabilir ve bir HTML elementi fazla büyükse ne yapılacağına kararverebilirsiniz.

Tüm elementler üst (top), alt (bottom), sağ (right) ve sol (left) özelliklerine sahiptir. Ancak bu özellikler CSS'deki position özelliği belirtilmemişse işe yaramayacaktır. Ayrıca birbirinden farklı dört pozisyon belirleme yöntemi vardır. Bunlar:

• static - Hiçbir özellik belirtilmediyse
• fixed - Sabit, tarayıcıya göre hareket etmeyen element
• relative - Normal olması gereken pozisyona göre konum belirlemek
• absolute - Koordinat belirleyerek sayfada bir yere yerleştirmek

static: Olması Gerektiği Gibi Bırakmak

Eğer position CSS kodunu hiç kullanmadıysak HTML nesneleri olduğu gibi sıralanacaktır. Bu şekilde olursa HTML elementinin alt, üst, sağ ve sol özellikleri belirlenemez.

fixed: Sabitlemek

Bir HTML elementini tarayıcı ekranına sabitlemek. Kaydıracı (scroll) kullansanız bile o element orada yer alacaktır (hareket etmez).

 p.fixed

{ position: fixed;

top: 30px;

right: 5px;

}

Yukarıdaki kod çalıştırılırsa "fixed" özelliğine sahip P elementinin sağdan 5 piksel üstten 30 piksel noktasında sabit bir şekilde kaldığını göreceğiz.

Bu tarz elementler bir diğerinin üzerine geçebilir ve diğerini kapatabilir.

relative: Normal Pozisyona Göre Konumlama

Bir HTML elementini sahip olduğu pozisyondan yukarı, aşağı, sağa ve sola doğru ayarlamamızı sağlar. Elementin kapladığı alan tarayıcı tarafından tutulmuştur, dolayısıyla bunda bir değişiklik olmaz. Ancak biz sağ, sol, alt ve üst tarafa doğru hareket ettirebiliriz.

 h2{position: relative;

                     left: -20px;

          }

Yukarıdaki örnekte H2 elementi kullanıldığı yerden 20 piksel sola kayacak ve oradan başlayacaktır. Bu durumda diğer elementlerin alanına girebilecektir.

absolute: Herhangi Bir Konum Belirleme

Herhangi bir elemente göre ya da element belirtilmediyse tüm HTML sayfasına göre yer alacağı konum piksel olarak ifade edilir. Örneğin H2 elementinin sayfanın başlangıç noktasının (0, 0) 100 piksel sağında ve 150 piksel altında (100, 150) olmasını istiyorsak:

 h2 {position: absolute;  

left: 100px;  top: 150px;}

Bu tarz belirlenen pozisyonlar RELATIVE'den farklı olarak alan kaplamazlar. Yani sayfamızdan soyutlanmışlardır. Bağımsız hareket eden ve sadece tek bir başlangıç noktasını dikkate alan elementler gibi düşünülebilir.

"Absolute" özellikli elementler diğer elementlerin üzerine geçebilir ve onları kapayabilir.

Z-İNDEX NEDİR? NASIL KULLANILIR?

z-index, konumlandırma elementleri uygulanmış katmanların z-eksenindeki konumu belirlemek için kullanılır.

z-index tüm elementlere uygulanamaz sadece konumlandırma değeri atanmışelementlere uygulanır. Bunun anlamı eğer bir elementi aynı z-ekseni üzerinde üste veya alt sıraya atmak istiyorsanız ilk olarak konumlandırma değeri atamalısınız.

img

   {

      position: absolute

      left: 0px;

      top: 0px;

 

      z-index: -1;

   }