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.