首頁  >  文章  >  每日程式設計  >  三分鐘了解css中z-index屬性

三分鐘了解css中z-index屬性

烟雨青岚
烟雨青岚轉載
2020-07-01 11:25:018834瀏覽

三分鐘了解css中z-index屬性

css中z-index屬性

#在做專案時,常常會用到彈出一個層,然後在這個層上進行操作,操作完成時就關閉彈出層,或點選別的地方進行關閉層。

通常都會在p樣式中設定z-index的值,例如父層設定z-index:100,子層就設定大於100,當到彈出父層時,子層能夠顯示。

例如(簡單寫一下):

9bd3d1511962ba90d1b141ee777f4b10
 c93057787d038d507f49406d37ba96e6
 94b3e26ee717c64999d7867364b1b4a3
94b3e26ee717c64999d7867364b1b4a3

#關閉彈出層:$("#p1").hide(); //需要引用jquery .js檔案

我們也可以點擊父層其餘的位置進行隱藏父層,只需要在p1上加個事件觸發hide()函數,但是運行起來,發現我點擊子層時也觸發了p1的事件,從而關閉彈出層,明顯不是我們需要效果,明明沒有給p2設定事件,為什麼會觸發呢?如何解決?

因為不管你的子級設定多高,都是會觸發父級事件,設定z-index為10000也不行。

解決:

$('#p2').click(function (e) {
            e.stopPropagation();
            return false;
        });

就是在p2上也加個事件,用"e.stopPropagation();"進行阻止冒泡,這樣就不會觸發p1事件。

感謝大家的閱讀,希望大家收益多多

本文轉自:https://blog.csdn.net/lilinoscar/article/details/51860462

推薦教學:《CSS教學

以上是三分鐘了解css中z-index屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:csdn.net。如有侵權,請聯絡admin@php.cn刪除