top özelliği, position özelliği absolute, relative veya fixed olarak belirtilmiş elementlerin sayfa veya ana elementi içindeki üstten uzaklığının belirlenmesini sağlar.
DOM Sözdizimi
element.style.top = "ustten"
CSS Sözdizimi
top: ustten
| ustten | auto, yüzde veya CSS Ölçü Birimlerinden bir değer alarak elementin üstten uzaklığını belirler.
- auto : Mesafe otomatik belirlenir.
- Yüzde değer : Ana elementinin genişliği ile oranlanarak belirlenir.
- CSS Ölçü Birimi : Mesafe net olarak belirlenir.
|
Aşağıdaki örnek, bir div elementinin position özelliğinin absolute olarak belirtilerek, top özelliğine yüzde değer ve piksel cinsinden net bir değer atanmasını göstermektedir. (Yüzde değerde üstten uzaklık tarayıcı penceresinin genişliğine göre farklılık gösterir.)
<style type="text/css">
div#ornekDiv
{
width: 100px;
height: 100px;
background-color: #E0E0E0;
}
</style>
<script type="text/javascript">
function degistir(deger)
{
var div = document.getElementById("ornekDiv");
div.style.position = "absolute";
div.style.top = deger;
}
function sabitle()
{
var div = document.getElementById("ornekDiv");
div.style.position = "static";
}
</script>
<input type="button" value="top = 50%" onClick="degistir('50%')"/>
<input type="button" value="top = 500px" onClick="degistir('500px')"/>
<input type="button" value="Sabitle" onClick="sabitle()"/>
<table width="110" height="110"><tr><td>
<div id="ornekDiv"></div>
</td></tr></table>
Canlı Sonuç