CSS bottom Özelliği

CSS bottom özelliği

Örnek:

Relative değeri almış bir kutunun içerisine absolute değeri almış bir kutu yerleştirip bottom değeri verildiğinde ,absolute değeri alan kutu istenilen şekilde konumlandırılabilir.

div.relative { position: relative; width: 250px; height: 280px; border: 2px solid yellow; } div.absolute { position: absolute; bottom: 30px; width: 100px; height: 100px; border: 2px solid blue; }

CSS bottom nedir nasıl kullanılır

Css bottom özelliğinde dikkat edilmesi gereken bir kaç nokta vardır.

  1. Eğer uygulanacak olan html elemanının position değeri static ise bottom özelliği etkisini gösteremez .Hareket olmaz.
  2. Eğer position değeri relative ise kendinden sonra gelen bir başka html elemanından yukarı yönde girilen değer kadar uzaklaşır.
  3. Eğer position değeri absolute ise html elemanı "document.body" yani sayfayı referans alarak konumlandıma işlemi tamamlanır.

CSS bottom CSS bottom özellikleri  
Varsayılan Değer: auto  
Kalıtsallık: yok  
Animasyon Özelliği: var
Versiyon: CSS2  
JavaScript bottom: object.style.bottom="100px"

CSS bottom Tarayıcı Desteği

CSS Kodu:
bottom 1.0 5.0 1.0 1.0 6.0

CSS bottom Değerleri

bottom:auto|length|initial|inherit;

CSS bottom özelliği değerleri

CSS bottom değerleri CSS bottom değerleri tanımları CSS örnek uygulamalar
auto Bu değer girildiğinde kapsayıcı elemanın sol üst köşesi başlangıç konumu referans alınır.
length Sayısal olarak bir değer girilir.
% Yüzde olarak bir değer girilir.
initial Özelliğin varsayılan değeridir.
inherit Soybağından gelen değeri kullanır.  

Yorumlar

Bu blogdaki popüler yayınlar

HTML progress Etiketi

CSS content Özelliği

HTML section Etiketi

CSS transition-delay Özelliği

CSS align-items özelliği

CSS justify-content Özelliği

CSS text-justify Özelliği

CSS overflow Özelliği

HTML5 Canvas Oyun Yapımı Dersleri

CSS top Özelliği