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中文網其他相關文章!