Categories: Style DOM

Style.Position

Properti style.position dipakai untuk menetapkan bagaimana memposisikan suatu elemen.

Sintaks:

obj.style.position = value;

Nilainya:

static (default)
Menyebabkan suatu elemen ditampilkan menurut 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 memiliki efek untuk elemen yang ‘static’ ini.
relative
Nilai relative hampir sama ibarat static, yang membedakan ialah properti style.top, style.right, style.bottom, dan style.left sanggup dipakai untuk menunjukkan efek kepada elemen yang ‘relative’ ini.
absolute
Nilai absolute mengakibatkan suatu elemen akan tetap pada posisinya menurut pengaturan koordinat properti style.top, style.right, style.bottom, dan style.left, tetapi dikala jendela browser di scroll elemennya akan ikut tergulung.
fixed
Nilai fixed hampir sama ibarat absolute, yang membedakannya ialah dikala 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>

Demikian yang dapat kami share kepada sobat source code aplikasi pada kesempatan ini, semoga dapat bermanfaat dan bisa menjadi referensi pemrograman bagi anda. Jangan lupa like Fan Page kami, dan SUBSCRIBE Channel Youtube kami untuk dapatkan update source code aplikasi terbaru.

Ahmad Code