JQuery set elemen dom ke bahagian atas pandangan z-indeks

3 Fungsi jQuery untuk menetapkan mana -mana elemen dom ke paparan atas (bawa ke depan ) Menggunakan harta CSS Z-index.

soalan yang sering ditanya mengenai jQuery dan z-indeks

Bagaimana saya boleh menetapkan indeks z elemen DOM menggunakan jQuery?

Untuk menetapkan indeks Z dari elemen DOM menggunakan jQuery, anda boleh menggunakan kaedah .css (). Kaedah ini membolehkan anda mendapatkan atau menetapkan sifat gaya elemen yang dipilih. Berikut adalah contoh bagaimana anda boleh menggunakannya untuk menetapkan z-indeks:

jQuery<span>.fn.mb_bringToFront= function(zIndexContext){
</span>    <span>var zi=1;
</span>    <span>var els= zIndexContext && zIndexContext!="auto" ? $(zIndexContext): $("*");
</span>    els<span>.not(".alwaysOnTop").each(function() {
</span>      <span>if($(this).css("position")!="static"){
</span>        <span>var cur = parseInt($(this).css('zIndex'));
</span>        zi <span>= cur > zi ? parseInt($(this).css('zIndex')) : zi;
</span>      <span>}
</span>    <span>});
</span>    <span>$(this).not(".alwaysOnTop").css('zIndex',zi+=1);
</span>    <span>return zi;
</span>  <span>};</span>

$ ("#elemen"). CSS ("z-indeks", "999"); Dalam contoh ini, "#Element" adalah ID elemen DOM yang ingin anda ubah, dan "999" adalah nilai z-indeks baru.

Terdapat beberapa sebab mengapa perubahan Z-indeks anda tidak berkuatkuasa. Salah satu sebab yang sama ialah elemen yang anda cuba ubah tidak diposisikan. Harta z-indeks hanya berfungsi pada unsur-unsur yang diposisikan (iaitu, unsur-unsur dengan kedudukan: relatif, kedudukan: mutlak, atau kedudukan: tetap). Jika elemen anda tidak diposisikan, anda boleh menetapkan kedudukannya menggunakan kaedah .css (), seperti ini:

$ ("#elemen"). CSS ("kedudukan", "relatif");

bagaimana saya boleh mendapatkan indeks z semasa elemen DOM? Ini:

var zindex = $ ("#elemen"). css ("z-indeks"); ". kaedah. Inilah contoh:

$ (". Elements"). CSS ("Z-indeks", "999"); -Index ditetapkan ke "999".

Bagaimana saya boleh mengubah secara dinamik z-indeks elemen? Kaedah JQuery's .CSS () digabungkan dengan pengendali acara. Sebagai contoh, anda boleh meningkatkan indeks z elemen apabila ia diklik, seperti ini:

$ ("#elemen"). Klik (fungsi () {
var zindex = parseInt ($ ( ini) .css ("z-indeks")); (this) .css ("z-indeks", zindex 1); ); Contohnya, setiap kali elemen dengan "elemen" id diklik, indeks z akan meningkat sebanyak 1.

Apakah nilai maksimum yang saya boleh tetapkan untuk z-indeks?

Nilai yang boleh anda tetapkan untuk z-indeks bergantung kepada penyemak imbas. Kebanyakan penyemak imbas menyokong nilai Z-indeks sehingga 2147483647.

Bolehkah saya menggunakan nilai negatif untuk z-indeks?

Ya, anda boleh menggunakan nilai negatif untuk z-indeks. Indeks z negatif bermaksud bahawa elemen akan dipaparkan di belakang unsur-unsur lain yang mempunyai indeks z 0 atau lebih besar.

Adakah z-indeks berfungsi dengan semua elemen HTML? , atau kedudukan: Tetap). Untuk membuat konteks penyusunan. Konteks penyusunan adalah konseptualisasi tiga dimensi unsur-unsur HTML di sepanjang paksi z khayalan berbanding pengguna, yang dianggap menghadapi pandangan atau laman web. Unsur-unsur kanak-kanak?

Jika elemen induk mempunyai indeks z yang lebih tinggi daripada anaknya, anak itu masih akan muncul di atas ibu bapa. Ini kerana elemen kanak -kanak disusun di hadapan ibu bapa mereka secara lalai. Walau bagaimanapun, jika elemen ibu bapa dan kanak-kanak berada dalam konteks penyusunan yang berbeza, satu dengan indeks z yang lebih tinggi akan muncul di atas.

Atas ialah kandungan terperinci JQuery set elemen dom ke bahagian atas pandangan z-indeks. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!