ID Artikel: 177378 - Kajian Terakhir: 02 Mei 2012 - Revisi: 3.0

INFO: Bagaimana atribut Z-index bekerja untuk elemen HTML

Tampil berdampinganKlik disini untuk menampilkan sumber Inggris dan terjemahan oleh mesin secara berdampingan
Penerjemahan MesinPeringatan: artikel ini adalah terjemahan oleh mesin
Retired KB ArticleSanggahan Konten KB yang Tidak Lagi Diperbarui
Tips SistemThis article applies to a different operating system than the one you are using. Article content that may not be relevant to you is disabled.

Pada Halaman ini

Perbesar semua | Perkecil semua

RINGKASAN

Ada banyak cara untuk mengklasifikasikan elemen pada halaman web. Untuk keperluan artikel ini dan atribut z-index , kami dapat membagi mereka ke dalam dua Kategori: windowed dan jendela.

Unsur-unsur windowed

  • <OBJECT>unsur-unsur Tag</OBJECT>
  • kendali ActiveX
  • colok-masuk
  • Dinamis HTML (DHTML) Scriptlets
  • Pilih elemen
  • IFRAMEs di Internet Explorer 5.01 dan sebelumnya
Catatan kendali ActiveX diimplementasikan sebagai jendela dan benar-benar jatuh ke dalam kategori jendela. secara asali, Microsoft Visual Basic dan Microsoft Foundation kelas (MFC) kontrol windowed, tetapi perpustakaan Template aktif (ATL) kontrol jendela.

Unsur-unsur jendela

  • Jendela kendali ActiveX
  • IFRAMEs dalam Internet Explorer 5.5 dan kemudian
  • Kebanyakan unsur DHTML, seperti hyperlink atau tabel atak
Kembali ke atas

INFORMASI LEBIH LANJUT

Semua elemen windowed cat sendiri di atas unsur semua jendela, meskipun keinginan mereka kontainer. Namun, unsur-unsur windowed ikuti atribut z-index sehubungan dengan satu sama lain, hanya sebagai unsur-unsur jendela berikut atribut z-index sehubungan dengan satu sama lain.

Semua jendela elemen yang diberikan pada pesawat MSHTML yang sama, dan unsur-unsur windowed menarik pesawat MSHTML terpisah. Anda dapat menggunakan z-index untuk memanipulasi elemen pada pesawat yang sama tetapi tidak untuk mencampur dan mencocokkan dengan unsur-unsur dalam pesawat yang berbeda. Anda dapat mengatur ulang z-pengindeksan elemen pada setiap pesawat, tetapi pesawat windowed selalu menarik di atas dari jendela pesawat.
Kembali ke atas

Bagaimana Z-index Works di Internet Explorer 5

Dalam Internet Explorer 5, IFRAMEs adalah windowed kontrol dan mengikuti atribut z-index sehubungan dengan kontrol lain windowed seperti Pilih elemen. Jika z-index dari IFRAME lebih besar dari unsur-unsur yang memilih , IFRAME menarik di atas unsur-unsur yang memilih dan sebaliknya. Jika z-index adalah sama, urutan menurun dari elemen pada halaman diprioritaskan; oleh karena itu, unsur terakhir menarik di atas dari unsur sebelumnya.

Dalam kode contoh berikut menggambarkan ini:
<HTML>
<HEAD>
<TITLE>Z-Index</TITLE>
<script>
function setindex()
{
	div1.style.zIndex=text1.value;
	select1.style.zIndex=text2.value;
	getindexes();
}

function getindexes(){

	text1.value=div1.style.zIndex;
	text2.value=select1.style.zIndex;
	text3.value=5;
}
</script>
</HEAD>
<BODY onload="getindexes()">

Div
<input type="text" value="" id=text1 name=text1 ><p>

Select
<input type="text" value="" id=text2 name=text2><p>

IFrame
<input type="text" value="" id=text3 name=text3><p>
<input type="button" value="Set Z-Index" id=button1 name=button1 onclick="setindex()">
<DIV id=div1 name=div1  style="width:200;height:200;background-color:lightblue;
position:absolute;left:350;top:250;z-index:">DIV</DIV>
<select id=select1 name=select1 style=";position:absolute;left:300;top:400;width=300;z-index:" 
size=1 >
	<option>Option1
	<option>Option2
	<option>Option3
</select>
<IFRAME id=iframe1 name=iframe1 src="" scroll=none style="width:100;height:115;position:absolute;
left:400;top:300;border-color:green;z-index:5"></iframe>
</BODY>
</HTML>
Z-index dari IFRAME diatur ke nilai konstan dari 5. Bila Anda memasukkan nilai yang lebih tinggi daripada sisa dari unsur-unsur, DIV elemen selalu menarik di bagian bawah karena itu jendela, dan unsur-unsur lain yang menarik di atas dari DIV elemen. Bila Anda mengubah z-indexmemilih elemen ke nilai yang lebih besar dari 5, unsur-unsur yang memilih menarik di atas dari IFRAME. Bila Anda mengubah z-indexmemilih elemen ke nilai yang kurang dari 5, ia menarik di bawah IFRAME.

Bila Anda menetapkan z-index unsur Pilih 5, IFRAME menarik di atas semua unsur Pilih karena IFRAME unsur terakhir dan, oleh karena itu, lebih diprioritaskan Pilih. Jika memilih elemen mengikuti IFRAME, unsur yang menarik di atas dari IFRAME ketika z-indeks sama.
Kembali ke atas

Bagaimana Z-index Works di Internet Explorer 5.5

Z-pengindeksan yang dibawa ke tingkat yang sama sekali baru di Internet Explorer 5.5 di mana IFRAMEs adalah tidak lagi windowed elemen. Untuk selengkapnya, lihat topik "Jendela IFRAME Elements" dalam artikel Microsoft Developer Network (MSDN) berikut:
http://MSDN.Microsoft.com/en-us/library/ms649493 (v=vs.85) .aspx #WindowlessFrames (http://msdn.microsoft.com/en-us/library/ms649493(v=vs.85).aspx#WindowlessFrames)
Hal ini membuat memilih elemen sebagai satu-satunya unsur yang windowed. Jika Anda menggunakan kode sebelumnya untuk menjalankan halaman di Internet Explorer 5.5, ketika Anda menetapkan z-indexmemilih elemen ke nilai yang lebih besar dari 5, ia menarik di atas dari IFRAME. Bertumpang ketika Anda menetapkan z-indexmemilih elemen ke nilai yang kurang dari 5, IFRAME tindih itu, meskipun mereka adalah kedua elemen jendela. Ini adalah apa yang membuat IFRAME unik: mengikuti z-index dengan unsur-unsur jendela, dan mendukung z-index dengan unsur-unsur windowed seperti memilih elemen dalam kasus ini.

Bila Anda menetapkan z-indexDIV elemen ke nilai yang lebih besar daripada IFRAME (seperti 6), DIV mencakup IFRAME. Ini mendukung pernyataan di atas bahwa IFRAMEs jendela dan bahwa mereka mengikuti urutan menurun z sehubungan dengan unsur-unsur jendela lain. Bila Anda menetapkan z-index nilai yang kurang dari atau sama dengan IFRAME (seperti 5), itu masih menarik di atas dari DIV karena urutan menurun dari elemen diprioritaskan. Bila Anda menetapkan z-indexDIV ke 6 dan meninggalkan z-indexmemilih elemen dan IFRAME pada 5, Pilih elemen selalu menarik di atas dari DIV karena windowed.

Namun, IFRAME mencoba untuk menggambar di atas dari Pilih karena terakhir dalam urutan menurun. Untuk mencegah hal ini, nilai memilih elemen z-index harus lebih besar daripada IFRAME, atau untuk memilih elemen harus terakhir dalam daftar untuk memastikan bahwa elemen selalu menarik di atas dari IFRAME ketika indeks z adalah sama. Karena ini, z-pengindeksan isi yang serupa dapat sulit. Untuk mengatasi masalah ini, gunakan metode berikut ini:
  • Gunakan atribut gaya cascading style sheets (CSS) untuk menyembunyikan dan menampilkan elemen bila diperlukan.
  • Menggunakan DHTML Scriptlets. Meskipun perilaku biasanya lebih dipilih, ini adalah salah satu contoh, di mana scriptlets pilihan.
  • Di Internet Explorer 5.5, Anda dapat menggunakan popup objek, yang memungkinkan Anda untuk menampilkan konten yang kaya di atas dari apa pun. Hal ini sangat berguna untuk menu dan alat tip fungsi. Untuk selengkapnya, lihat "popup objek" artikel di situs Website MSDN berikut:
    .aspx http://MSDN.Microsoft.com/en-us/library/ms535882 (v=vs.85) (http://msdn.microsoft.com/en-us/library/ms535882(v=vs.85).aspx)
  • Menggunakan jendela kendali ActiveX bukannya windowed objek. Sayangnya, semua kendali ActiveX tidak memiliki jendela implementasi.
Kembali ke atas

REFERENSI

Untuk informasi lebih lanjut tentang mengembangkan solusi berbasis Web untuk Microsoft Internet Explorer, kunjungi Web site Microsoft berikut:
http://MSDN.Microsoft.com/IE/ (http://msdn.microsoft.com/ie/)

http://support.Microsoft.com/IEP (http://support.microsoft.com/iep)
Kembali ke atas
Kata kunci: 
kbbug kbdhtml kbfaq kbieobj kbinfo kbmt KB177378 KbMtid
Kembali ke atas
Penerjemahan MesinPenerjemahan Mesin
PENTING: Artikel ini diterjemahkan menggunakan perangkat lunak mesin penerjemah Microsoft dan bukan oleh seorang penerjemah. Microsoft menawarkan artikel yang diterjemahkan oleh seorang penerjemah maupun artikel yang diterjemahkan menggunakan mesin sehingga Anda akan memiliki akses ke seluruh artikel baru yang diterbitkan di Pangkalan Pengetahuan (Knowledge Base) dalam bahasa yang Anda gunakan. Namun, artikel yang diterjemahkan menggunakan mesin tidak selalu sempurna. Artikel tersebut mungkin memiliki kesalahan kosa kata, sintaksis, atau tata bahasa, hampir sama seperti orang asing yang berbicara dalam bahasa Anda. Microsoft tidak bertanggung jawab terhadap akurasi, kesalahan atau kerusakan yang disebabkan karena kesalahan penerjemahan konten atau penggunaannya oleh para pelanggan. Microsoft juga sering memperbarui perangkat lunak mesin penerjemah.
Klik disini untuk melihat versi Inggris dari artikel ini:177378  (http://support.microsoft.com/kb/177378/en-us/ )
Kembali ke atas
Retired KB ArticleSanggahan Konten KB yang Tidak Lagi Diperbarui
Artikel ini berisi tentang produk yang tidak lagi didukung oleh Microsoft. Oleh karena itu, artikel ini disajikan ?sebagaimana adanya? dan tidak akan diperbarui.
Kembali ke atas