父子級間的z index關係

2021-07-24 21:22:01 字數 821 閱讀 3445

自己經常用z-index改變層級,但從來沒有在父子元素上使用。今天乙個小夥伴在製作二級選單的時候就碰到了這個問題,引起了我深深的思考,天啦嚕,我竟然不知道!廢話少說,先看**

我們想通過使用z-index改變父子層級,使父親的層級高於孩子,從而

覆蓋兒子,然而結果卻不是我們想要的,無論我們怎麼調高父親層級,降低兒子層級都沒有用,弄到這裡,你就說你有木有慌,有木有懷疑rensheng,你沒有?天啦嚕,我有啊!好了轉入正題:

關於z-index層級問題

首先使用z-index需要先加上position:absolute/relative定位(這不廢話啊!)

。然後你要知道z-index 是要考慮父級的,如果子

級z-index為0

,那麼父

級就是200000也不會覆蓋住子

級。原因如下:

在標準瀏覽器中,對父級的要求不是特別高,同級的對應上z-index可以了。但要注意的是父級裡放乙個子級那麼父級是無法放在子級之上的,需要放在同一級別中才可以(經過測試的)

如果想要父級覆蓋子級,那麼父級不需要設定z-index,只要孩子設定就z-index就可以了。如下:

以上均是個人觀點,如果有誤,敬請指出,多多了解!以促進步!

巢狀型別查詢 父子級關係查詢

1 put order doc 12,1216 17 如果直接使用bool查詢name為小公尺掃地機械人,為4999的資料。按理說不會有資料,但是結果會查詢出資料。1 get order search 使用此查詢會查詢出結果,但這很明顯不是我們想要的210 1115 16 17 18 19 解決辦法...

RXJS元件間超越父子關係的相互通訊

用到這個的需求是這樣的 元件a有資料變化,將變化的資料流通知元件b接收這個資料流並做相應的變化 import from angular core import from rxjs subject 事件匯流排,元件之間可以通過這個服務進行通訊 injectable export class event...

父子元件間的訪問

不同與通訊,訪問則是直接進入父元件或者子元件中獲取資料或呼叫方法,而不是通過傳值的方式呼叫 children和 refs children const childobj this.children 0 children有多個是個陣列,這裡取第乙個 注意 通過 children訪問子元件,由於其本質為...