Web Geliştirme Eğitimi Dersleri, 008

4 Ocak 2008, Cuma

Linkler

position:

Positioning

Koordinat Sistemi

Koordinat Sistemi

  • 006’ncı derste Koordinat Sistemi’ne giriş yapmıştık.
  • Browser ekranında sabit bir koordinat’da ekrana birşey bastırmak için kullanılır.
  • CSS’de position: ile ifade edilir.
  • Her element default durumda position: static; olarak durur.
  • position: değerine göre;
    1. top:
    2. right:
    3. bottom:
    4. left:
    komutları devreye girer. Eğer position: belirtilmemişse bu değerler çalışmaz!
  1. #box
  2. {
  3.  left: 100px;
  4.  top: 100px;
  5. }
  • id’si box olan element hiç bir şekilde ( 100 , 100 ) koordinatında görünmeyecek!
  • position: tanımlanmadığı için default olarak static durumunda!
  1. #box
  2. {
  3.  position: absolute; /* doğrusu */
  4.  left: 100px;
  5.  top: 100px;
  6. }

position: static | relative | absolute | fixed

position: static;

position: absolute;

position: absolute;

position: absolute; ( A )

CSS
  1. #box
  2. {
  3.  position: absolute;
  4.  left: 100px;
  5.  top: 100px;
  6.  background-color: red;
  7.  color: white;
  8.  width: 200px;
  9.  height: 200px;
  10. }
HTML
  1. <body>
  2.  <div id="box">test box</div>
  3. </body>

position: absolute; ve default layer-order durumu

position: absolute; ve default layer-order durumu ( B )

CSS
  1. #box
  2. {
  3.  position: absolute;
  4.  left: 100px;
  5.  top: 100px;
  6.  background-color: red;
  7.  color: white;
  8.  width: 200px;
  9.  height: 200px;
  10. }
  11. #box2
  12. {
  13.  position: absolute;
  14.  left: 50px;
  15.  top: 50px;
  16.  width: 200px;
  17.  height: 200px;
  18.  background-color: gray;
  19.  color: white;
  20. }
HTML
  1. <body>
  2.  <div id="box">test box</div>
  3.  <div id="box2">test box2</div>
  4. </body>
ANALİZ
  • Herhangi bir Layer-Order durumu belirtmememize rağmen
    Broser lineer olarak sıralama yaptı!
  • Html’deki sıraya uydu, önce box1’i sonra box2’yi ekrana bastı.
  • box2, box1’den sonra ekrana basıldığı için direk
    box1’in üzerinde yer aldı!

z-index:

z-index: açıklaması

z-index: açıklaması

z-index: layer-order

z-index: layer-order

  • Eğer resim ( B )’deki durumu değiştirmek isteseydik, elementlere z-index: bilgisi vermemiz gerekecekti!
  • Normal-Flow’da, browser, position: durumunu ayarlamak için, kafasına göre z-index verdi.
  • Bu durumda, #box’in z-index’i, teorik olarak #box2’den küçük bir sayı aldı.
  • Kural şudur : bize en yakın elementin z-index’i > arkadaki elementler’in z-index’i.
Kırmızı Kutu’yu üste çıkarmak için iki metod uygulanır;
  • Ya her elemente bir z-index: tanımlayacağız,
  • Yada, html’deki sırayı değiştireceğiz
#1. Yol : ( CSS’le ayar yap! )
  1. #box
  2. {
  3.  position: absolute;
  4.  left: 100px;
  5.  top: 100px;
  6.  background-color: red;
  7.  color: white;
  8.  width: 200px;
  9.  height: 200px;
  10.  z-index: 2;
  11. }
  12. #box2
  13. {
  14.  position: absolute;
  15.  left: 50px;
  16.  top: 50px;
  17.  width: 200px;
  18.  height: 200px;
  19.  background-color: gray;
  20.  color: white;
  21.  z-index: 1;
  22. }
#2. Yol : ( html’deki sırayı değiştir! )
  1. <body>
  2.  <div id="box2">test box2</div>
  3.  <div id="box">test box</div>
  4. </body>

Uçan div

Havada uçan div’ler

  • Dikkat edilirse, #cover’ın dışına taşar #box ve #box2
  • #cover, normal-flow durumunda, #box ve #box2 absolute pozisyonda!
  • position: yüzünden html hiyeraşisi bozuldu!
HTML
  1. <div id="cover">
  2. <p>Bu paragraf <strong>#cover</strong>’ın içinde.</p>
  3. <p><strong>#cover</strong> aslında <strong>#box</strong> ve <strong>#box2</strong>’yi kapsar ???</p>
  4. <div id="box2">test box2</div>
  5. <div id="box">test box</div>
  6. </div>
CSS
  1. #box
  2. {
  3.  position: absolute;
  4.  left: 100px;
  5.  top: 100px;
  6.  width: 200px;
  7.  height: 200px;
  8.  background-color: red;
  9.  color: white;
  10. }
  11. #box2
  12. {
  13.  position: absolute;
  14.  left: 50px;
  15.  top: 50px;
  16.  width: 200px;
  17.  height: 200px;
  18.  background-color: gray;
  19.  color: white;
  20. }
  21. #cover
  22. {
  23.  background: #ff0;
  24. }
  25. #cover p
  26. {
  27.  text-align: right;
  28. }

position: relative;

Relative Pozisyon

Koyu renkli kutu, açığa göre ( sarı ) relatif pozisyonlandırılmış.

  1. #yellow
  2. {
  3.  position: absolute;
  4.  left: 100px;
  5.  top: 100px;
  6.  width: 200px;
  7.  height: 200px;
  8. }
  9. #dark
  10. {
  11.  position: relative;
  12.  left: 50px;
  13.  top: 50px;
  14.  width: 100px;
  15.  height: 100px;
  16. }
  • Koyu kutu, sarı’nın içinde olduğu için, pozisyonu da relative olduğu için;
  • 0,0 noktası, koyu için, içinde bulunduğu kutunun sol üst köşesidir.
  • relative olan nesne için koordinat sistemi sanki 0’landı!

position: fixed;

Fixed

Element, içinde bulunduğu window’daki scroll durumundan etkilenmez, verilen yerde sabit bir şekilde durur.

  1. #box
  2. {
  3.  width: 200px;
  4.  height: 100px;
  5.  background: #ff0;
  6.  position: fixed;
  7.  right: 0px;
  8.  top: 0px;
  9. }