css中z-index屬性
在做項(xiàng)目時(shí)，常常會(huì)用到彈出一個(gè)層，然后在這個(gè)層上進(jìn)行操作，操作完成時(shí)就關(guān)閉彈出層，或者點(diǎn)擊別的地方進(jìn)行關(guān)閉層。
通常都會(huì)在p樣式中設(shè)置z-index的值，比如父層設(shè)置z-index:100，子層就設(shè)置大于100，起到彈出父層時(shí)，子層能夠顯示。
例如（簡(jiǎn)單寫一下）：
<p style="width: 100%;background: #fff;overflow: hidden;position: fixed;top: 0;left: 0;z-index: 100;height:300px" id="p1" > ?<p style="width: 100%;background: #fff;overflow: hidden;position: fixed;top: 0;left: 0;z-index: 101;height:100px" id="p2" > ?</p> </p>
關(guān)閉彈出層：$("#p1").hide(); //需要引用jquery.js文件
我們也可以點(diǎn)擊父層其余的位置進(jìn)行隱藏父層，只需要在p1上加個(gè)事件觸發(fā)hide()函數(shù)，但是運(yùn)行起來(lái)，發(fā)現(xiàn)我點(diǎn)擊子層時(shí)也觸發(fā)了p1的事件，從而關(guān)閉彈出層，明顯不是我們需要效果，明明沒(méi)有給p2設(shè)置事件，為什么會(huì)觸發(fā)呢？如何解決？
因?yàn)椴还苣愕淖蛹?jí)設(shè)置多高，都是會(huì)觸發(fā)父級(jí)事件，設(shè)置z-index為10000也不行。
解決：
$('#p2').click(function (e) {
e.stopPropagation();
return false;
});就是在p2上也加個(gè)事件，用"e.stopPropagation();"進(jìn)行阻止冒泡，這樣就不會(huì)觸發(fā)p1事件。
感謝大家的閱讀，希望大家收益多多
本文轉(zhuǎn)自：https://blog.csdn.net/lilinoscar/article/details/51860462
推薦教程：《CSS教程》
Atas ialah kandungan terperinci 三分鐘了解css中z-index屬性. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undress AI Tool
Gambar buka pakaian secara percuma
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Bagaimana menggunakan tag semantik baru (seperti seksyen, artikel) dalam HTML5?
May 23, 2025 pm 11:36 PM
Alasan kami menggunakan tag semantik ialah mereka meningkatkan SEO, meningkatkan kebolehcapaian, dan pemeliharaan kod. 1. Sertakan tajuk apabila menggunakannya untuk mengelakkan penyalahgunaan. 2. Gunakan blok kandungan yang berdiri sendiri, sesuai untuk blog atau berita. 3. Beri perhatian kepada sarang dan SEO tag, dan jangan tumpukan tag untuk SEO.
Bagaimana saya boleh memasukkan CSS dengan React?
May 26, 2025 am 12:01 AM
Terdapat lima cara untuk memasukkan CSS dalam React: 1. Gunakan gaya inline, yang mudah tetapi tidak kondusif untuk digunakan semula dan penyelenggaraan; 2. Gunakan fail CSS, yang dilaksanakan melalui import, yang kondusif kepada organisasi tetapi boleh menyebabkan konflik; 3. Gunakan cssmodul untuk mengelakkan konflik global tetapi memerlukan konfigurasi; 4. Gunakan styledcomponents untuk menghasilkan gaya secara dinamik menggunakan JavaScript tetapi memerlukan pergantungan pada perpustakaan; 5. Gunakan sass atau kurang untuk menyediakan lebih banyak fungsi tetapi meningkatkan kerumitan pembinaan.
Bagaimanakah saya boleh memasukkan CSS hanya pada beberapa halaman?
Jun 11, 2025 am 12:01 AM
Terdapat tiga cara untuk secara selektif memasukkan CSS pada halaman tertentu: 1. Inline CSS, sesuai untuk halaman yang tidak sering diakses atau memerlukan gaya unik; 2. Muatkan fail CSS luaran menggunakan keadaan JavaScript, sesuai untuk situasi di mana fleksibiliti diperlukan; 3. Pembendungan di sebelah pelayan, sesuai untuk senario menggunakan bahasa sisi pelayan. Pendekatan ini dapat mengoptimumkan prestasi laman web dan penyelenggaraan, tetapi memerlukan keseimbangan modularitas dan prestasi.
Kaedah Penyertaan CSS: Pro, Cons, dan Contoh
Jun 07, 2025 am 12:03 AM
Thedifferentmethodsforincludingcssinawebpageareinline, internal, andexternalcs.1) Inlinecss: EasyToImplementButleadStounMaintainableCode.2) InternalCss: moreorganizedThaninButcanclutterhtml.3)
HTML, CSS, dan JavaScript: Bagaimana mereka bekerjasama
May 27, 2025 am 12:05 AM
HTML, CSS dan JavaScript bertanggungjawab untuk struktur, gaya dan fungsi dinamik dalam pembangunan web masing -masing. 1. HTML mentakrifkan struktur web, 2. CSS bertanggungjawab untuk gaya dan susun atur, 3. JavaScript menyediakan interaksi dan fungsi dinamik.
Apakah tujuan harta z-indeks, dan bagaimanakah ia mempengaruhi konteks penyusunan?
Jun 09, 2025 am 12:16 AM
Z-indeks digunakan dalam CSS untuk mengawal susunan elemen stacking, tetapi kesannya dibatasi oleh "konteks penyusunan". 1.Z-indeks hanya berkuatkuasa dalam konteks penyusunan yang sama, dan semakin tinggi nilai, semakin tinggi nilai. 2. Konteks penyusunan dicipta oleh keadaan tertentu, seperti unsur-unsur kedudukan untuk menetapkan z-indeks, ketelusan, transformasi, penapis, dan sebagainya. 4. Apabila menggunakan z-indeks, elakkan penyalahgunaan nilai tinggi, mengamalkan julat hierarki yang bermakna, dan periksa sama ada elemen induk mempengaruhi susunan. 5. Apabila menghadapi masalah, struktur dan gaya DOM perlu dikaji semula untuk mengesahkan hubungan konteks. Kunci untuk memahami Z-indeks terletak pada menguasai mekanisme konteks penyusunan.
Amalan terbaik untuk memasukkan CSS di laman web anda
May 24, 2025 am 12:09 AM
Thebestpracticesforincludingcssinawebsiteare: 1) useexternalcsssforseparationofcontentandpresentation, reusability, dancachingbenefits.2) pertimbangancsssprocessorsorsorlikessorlessformodulari.)
Cara Berurusan Dengan CSS dan Kepekaan Kes
May 25, 2025 am 12:02 AM
Cssismostlycase-insensitive, butselectorsandcustompropertiesarecase sensitif.1) useConsistentcasingconventions.2) porkinterslikestylelint.3) testacrossbrowsers.4)
