Web, işletme ve inovasyon hakkında bir takım yazılar İletişim için Form

Defocuyu takip etmek isteyenlere, RSS - FeedBurnerSanal Alemde Ben, Friendfeed - Flickr - Twitter - Vimeo


Position:Relative ve Absolute Kullanımı

absoluterelativeCss ile kodlama yaparken bir kutuyu tarayıcıda istediğimiz bir noktada konumlandırmak için "positon:absolute" kodunu kullanırız. Yanda gördüğünüz gibi sarı kutuyu tarayıcımızın yukarı ve sağ tarafına 100'er px uzaklığa hizalamış bulunmaktayız.

Eğer kodlama sırasında başka bir kutuya "position:relative" özelliği verildiyse bu sefer "positon:absolute" özeliğine sahip kutular ona bağlanıyor. Yani yanda gördüğünüz gibi gri kutu "position:relative" özelliğine sahip, sarı kutuysa "positon:absolute" özelliğine sahip olduğu için artık tarayıcının değil, gri kutunun yukarı ve sağ tarafına 100'er px uzaklığa konumlanmıştır.

İlgili kodlar aşağıda buyrun inceleyin,

HTML:
  1. <div id="tema">
  2. <div id="kutu"></div>
  3. </div>

CSS:
  1. div#kutu{
  2.     height: 50px;
  3.     width: 50px;
  4.     position:absolute;
  5.     top: 50px;
  6.     right: 50px;
  7.     background:#F90;
  8. }
  9.  
  10. div#tema{
  11.     margin: 0 auto;
  12.     width: 300px;
  13.     height: 200px;
  14.     position:relative;
  15.     background: #CCC;
  16. }

Ağustos 27th, 2009 Etiketler: , , ,
| Kategori: CSS & XHTML | 1 Yorum » Yazar: abdullah