DAFTAR LABEL POPULER PENELITIAN.ID

Jangan Buka Artikel Ini!

Mengatur Nilai Stack HTML Menggunakan zIndex Style DOM

Properti Style zIndex DOM pada HTML merupakan properti yang digunakan untuk mengatur atau mengembalikan nilai urutan stack dari sebuah posisi elemen. Elemen yang memiliki sebuah urutan stack rendah akan diposisikan pada elemen lainnya yang nilai stack-nya lebih tinggi. Contoh, elemen dengan nilai urutan stack 1 akan berada diposisi depan dari elemen dengan urutan stack 0. Properti Style zIndex umumnya digunakan ketika user ingin menciptakan elemen overlapping.

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.

Baca Juga:


4 Value Properti zIndex Style DOM pada HTML
Properti zIndex Style DOM

Berikut adalah ilustrasi program dari properti zIndex Style DOM pada HTML.

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 

SekolahZonasi.Blogspot 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>


Komentar

  1. Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti zIndex Style DOM pada HTML?

    BalasHapus
    Balasan
    1. Berikut ini diperlihatkan beberapa contoh browser yang dapat digunakan untuk mengaktifkan properti z-index style DOM pada HTML:
      1. Google Chrome
      2. Internet Explorer
      3. Firefox
      4. Opera
      5. Apple Safari

      Hapus
  2. Apa yang dimaksud dengan properti zIndex DOM pada HTML?

    BalasHapus
    Balasan
    1. Properti 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.

      Hapus
    2. Properti 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

Posting Komentar

Hubungi admin melalui Wa : +62-896-2514-6106

Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.

Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.

~ Ikatlah Ilmu dengan Memostingkannya ~

Postingan populer dari blog ini (30 Hari)

Specifier %d dan %i Bahasa C dan Fungsinya

Enkapsulasi Java dan Fungsinya

4 Kesalahan Umum yang Sering Terjadi pada PTK

Cara Membuat Drag and Drop pada HTML

Postingan populer dari blog ini (All Time)

Enkapsulasi Java dan Fungsinya

Komunitas