Properti style.position digunakan untuk menetapkan bagaimana memposisikan suatu elemen.
Sintaks:
obj.style.position = value;
Nilainya:
static(default)
Menyebabkan suatu elemen ditampilkan berdasarkan konteks dan urutan penulisan elemen itu sendiri.- Jika elemen itu termasuk kategori block-level element, elemen itu akan ditampilkan sebagaimana tampilan dari block-level element umumnya.
- Jika elemen itu termasuk kategori inline element, elemen itu akan ditampilkan sebagaimana tampilan dari inline element umumnya.
Properti style.top, style.right, style.bottom, dan style.left tidak akan mempunyai efek untuk elemen yang 'static' ini.
relative
Nilairelativehampir sama sepertistatic, yang membedakan adalah properti style.top, style.right, style.bottom, dan style.left dapat digunakan untuk memberikan efek kepada elemen yang 'relative' ini.absolute
Nilaiabsolutemenyebabkan suatu elemen akan tetap pada posisinya berdasarkan pengaturan koordinat properti style.top, style.right, style.bottom, dan style.left, tetapi ketika jendela browser di scroll elemennya akan ikut tergulung.fixed
Nilaifixedhampir sama sepertiabsolute, yang membedakannya adalah ketika jendela browser di scroll elemennya tidak akan ikut tergulung.inherit
Contoh:
<HTML>
<HEAD>
<SCRIPT TYPE="text/javascript">
function absoluteVal()
{
var x=document.getElementById("x");
x.style.position = "absolute";
x.style.left = "500";
x.style.top = "100";
x.innerHTML = "Absolute -- coba scroll halaman.";
x.style.backgroundColor = "green";
}
function fixedVal()
{
var x=document.getElementById("x");
x.style.position = "fixed";
x.style.left = "500";
x.style.top = "100";
x.innerHTML = "Fixed -- coba scroll halaman.";
x.style.backgroundColor = "green";
}
</SCRIPT>
</HEAD>
<BODY STYLE="height:1000px">
<BUTTON TYPE="button" ONCLICK="absoluteVal()">Absolute</BUTTON>
<BUTTON TYPE="button" ONCLICK="fixedVal()">Fixed</BUTTON>
<P ID="x"><SPAN STYLE="background:green">Static</SPAN></P>
</BODY>
</HTML>
