CSS bottom özelliği
- Önceki sayfa border-width
- Son sayfa box-decoration-break
Tanım ve kullanım
bottom özelliği, elementin alt kenarını tanımlar. Bu özellik, konumlandırılan elementin alt dış kenarının içerik bloğu alt kenarı arasındaki kayma değerini tanımlar.
Yorum:"position" özelliğinin değeri "static" ise, "bottom" özelliği ayarlanmaz.
Açıklama
Static elementler için auto; uzunluk değerleri için ilgili mutlak uzunluk; yüzdelik değerler için belirtilen değer; aksi takdirde auto.
Relatif tanımlanmış elementler için, eğer bottom ve top her ikisi de auto ise, hesaplanmış değerler her ikisi de 0'dır; eğer biri auto ise, diğerinin tersi alınır; eğer ikisi de auto değilse, bottom top değerinin tersi alınır.
Ayrıca bkz:
CSS dersleri:CSS konumlandırma
HTML DOM referans el kitabı:bottom özelliği
Örnek
Görselin alt kenarını içeren öğenin alt kenarının 5 piksel yukarısına ayarlayın:
img { position:absolute; bottom:5px; }
CSS dilbilgisi
bottom: auto|length|initial|inherit;
Özellik değeri
Değer | Açıklama |
---|---|
auto | Varsayılan değer. Tarayıcı tarafından alt konum hesaplanır. |
% | Elementin alt kenar konumunu içeren öğenin yüzdesiyle ayarlayın. Negatif değerler kullanılabilir. |
length | Elementin alt kenar konumunu px, cm gibi birimlerle ayarlayın. Negatif değerler kullanılabilir. |
inherit | bottom özelliğinin değerini ebeveyn öğesinden miras alması gerektiğini belirtir. |
Teknik ayrıntılar
Varsayılan değer: | auto |
---|---|
Miras: | hayır |
Sürüm: | CSS2 |
JavaScript dilbilgisi: | object.style.bottom="50px" |
Daha fazla örnek
- Resmin alt kenarını piksel ile ayarlayın
- Bu örnek, resmin alt kenarını piksel değerleri kullanarak nasıl ayarlandığını gösterir.
- Resmin alt kenarını yüzde ile ayarlayın
- Bu örnek, resmin alt kenarını yüzde değerleri kullanarak nasıl ayarlandığını gösterir.
Tarayıcı desteği
Tablodaki rakamlar, bu özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtmektedir.
Chrome | IE / Edge | Firefox | Safari | Opera |
---|---|---|---|---|
1.0 | 5.0 | 1.0 | 1.0 | 6.0 |
- Önceki sayfa border-width
- Son sayfa box-decoration-break