bottom
bottom özelliği, style.position özelliği absolute veya fixed olarak ayarlanıp rastgele yerleştirilebilen elementlerin alt kenarı ile pencerenin görünen alanının alt kenarı arasındaki mesafeyi belirler.
DOM Sözdizimi
element.style.bottom = "yerlesim"
CSS Sözdizimi
bottom: yerlesim
| yerlesim | Aşağıdaki değerlerden birini alabilir.
- auto : Elementin alttan uzaklığı otomatik belirlenir.
- Yüzde değer : Element içinde bulunduğu bloğun yüksekliğine göre hesaplanarak yerleştirilir.
- CSS Uzunluk ölçüsü birimlerinden birini alabilir. Bunlar, em, ex, px, in, cm, mm, pt veya pc tiplerinden biri ile tam veya kayar noktalı bir tam sayıdır.
|
Aşağıdaki örnek, style.position özelliği absolute olarak belirtilen bir div elementinin top, right, bottom ve left özellikleri kullanılarak ekranının dört köşesine yerleştirilmesini göstermektedir.
<script type="text/javascript">
function yerlestir(ust, sag, alt, sol)
{
var div = document.getElementById("ornekDiv");
div.style.position = "absolute";
div.style.top = ust;
div.style.right = sag;
div.style.bottom = alt;
div.style.left = sol;
}
</script>
<style type="text/css">
#ornekDiv {
width:150px;
color:white;
background-color:green;
}
#ornekDiv p
{
text-align:center;
font-weight:bold;
}
#ornekDiv input
{
width:68px;
margin:2px;
}
</style>
<div id="ornekDiv"><p>Örnek Div</p>
<input type="button" value="Üst-Sol" onClick="yerlestir('0px', 'auto', 'auto', '0px')" />
<input type="button" value="Üst-Sağ" onClick="yerlestir('0px', '0px', 'auto', 'auto')" /><br/>
<input type="button" value="Alt-Sol" onClick="yerlestir('auto', 'auto', '0px', '0px')" />
<input type="button" value="Alt-Sağ" onClick="yerlestir('auto', '0px', '0px', 'auto')" />
// Üst Sağ Alt Sol
</div>
Test Edin
|