Mengatur Nilai Stack HTML Menggunakan zIndex Style DOM
 |
| Properti zIndex Style DOM |
Sintak:
- mendapatkan nilai properti zIndex: object.style.zIndex;
- mengatur nilai properti zIndex: object.style.zIndex = "auto | number | initial | inherit"
Property Values:
- auto: digunakan untuk membuat browser menentukan nilai urutan stack dari suatu elemen.
- number: digunakan untuk nilai bilangan bulat yang mendefinisikan urutan stack dari suatu elemen.
- initial: digunakan untuk mengatur nilai properti ke nilai default-nya.
- inherit: digunakan untuk menerima nilai turunan properti dari elemen parent.
Return Values: digunakan untuk mengembalikan sebuah nilai string yang merepresentasikan urutan stack dari suatu elemen.
Contoh: mengubah urutan stack dari elemen IMG.
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style zIndex
</title>
<style>
#MyImage
{
position: absolute;
left: 200px;
top: 80px;
z-index: -1
}
h1
{
color: green;
}
h2
{
font-family: Impact;
}
body
{
text-align: center;
}
</style>
</head>
<body>
<center>
<h1>
Blog Elfan
</h1>
<h2>
Properti Style zIndex
</h2>
<img
id="MyImage"
src=
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxG4jQWM89SftTqDGIj4XilGlH-LYpumrcY3mPq3sS6cf9aUGmI9LmdKgDFkC8u2F3Hs533GTfFJZuMR2R8DMgu62ztFxy1x9-_W5_Um116SpLPkF21Mivi8ltN3wvb0c-h_0El2ge3DMDF0E7a_cTWwtP54SfkCmtX_Qj55kQeqt0KkBV45tVZD3m/s1080/blogmapel-85fba448-5de5-412b-9ac4-d246af613a1b.jpg"
width="200"
height="200">
<button
type="button"
ondblclick="stack()">
Bring Logo In The Front
</button>
<p>
Ini adalah logo dari blog
penelitian.id dengan
nilai z-index adalah 0.
</p>
<br>
<p>
Untuk menempatkan logo
dibagian depan, double klik
tombol "Bring Logo In The
Front" button.
</p>
<script>
function stack()
{
document.getElementById("MyImage").style.zIndex = "1";
}
</script>
</center>
</body>
</html>
- Penggunaan Properti window.innerHeight DOM pada HTML [klik]
- Penggunaan Properti window.innerWidth DOM pada HTML [klik]
- Penggunaan Properti window.length DOM pada HTML [klik]
- 3 Sintak Properti localStorage DOM pada HTML [klik]
- Penggunaan Properti window.name DOM pada HTML [klik]
- Penggunaan Properti Window Opener DOM pada HTML [klik]
- Penggunaan Properti outerHeight DOM pada HTML [klik]
Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti zIndex Style DOM pada HTML?
BalasHapusBerikut ini diperlihatkan beberapa contoh browser yang dapat digunakan untuk mengaktifkan properti z-index style DOM pada HTML:
Hapus1. Google Chrome
2. Internet Explorer
3. Firefox
4. Opera
5. Apple Safari
Apa yang dimaksud dengan properti zIndex DOM pada HTML?
BalasHapusProperti zIndex merupakan properti DOM HTML yang digunakan untuk menetapkan atau mengembalikan urutan tumpukan dari elemen yang diposisikan. Elemen dengan urutan tumpukan yang lebih besar seperti 1 akan diposisikan diposisi depan dari elemen lain dengan urutan tumpukan yang lebih rendah 0.
HapusProperti zIndex Style DOM pada HTML merupakan properti yang digunakan untuk menentukan urutan tumpukan elemen, dimana elemen dengan urutan tumpukan yang lebih besar akan selalu berada diposisi depan dari urutan tumpukan elemen yang lebih rendah.
Hapus