z index在子節點設定得很大卻不生效?

2022-09-11 16:00:31 字數 921 閱讀 9107

首先,z-index屬性必須在position屬性設定之後才能起作用。 對於同級元素,position不為static且z-index存在的情況下z-index大的元素會覆蓋z-index小的元素,即z-index越大優先順序越高。不同級元素呢?看下面的例子:

<

div

id="a"

style

="position:relative;z-index:1;"

>

<

div

id="a1"

style

="position:relative;z-index:10;background-color: blue;width: 100px;height: 100px;"

>a-1

div>

div>

<

div

id="b"

style

="position:relative;z-index:1;"

>

<

div

id="b1"

style

="position:relative;z-index:1;background-color: red;left: 50px;top: -50px;"

>b-1

div>

div>

id='a'和id='b'的我們分別稱為a、b元素。

首先,a、b是同級的,並且z-index相同,那麼b將覆蓋a;

但是a的子元素a1的z-index是10,b的子元素b1的z-index是1,到底是red在上面還是blue在上面呢?效果圖如下:

為什麼?

因為上述情況下子節點a1的z-index是取決父節點的,永遠不可能超過父節點。所以即使它的z-index設定的很高,還是不能覆蓋b,當然包括b1。

z index設定完後,元素仍然無法在頂層顯示

如下兩步檢查 檢查position屬性。z index只能在position屬性值為relative或absolute或fixed的元素上有效。觀察跟需要覆蓋元素是否已不在同乙個父節點中。我們通常都是在同乙個父節點的子節點中設定z index值,所以可以控制子節點相互覆蓋的情況,但有時候,子節點超出...

在SVG文件中遍歷子節點的問題

在svg文件中遍歷子節點的問題 相信很多使用adobe svg viewer asv 進行svg程式設計的都遇到過這個問題,在使用節點遍歷時,返回的節點數總是有些奇怪,例如在svg文件中如果寫入 by their by their 然後使用如下 取該組下的子節點數量 var elem svgdocu...

C 怎麼設定子窗體在主窗體中居中顯示

c 怎麼設定子窗體在主窗體中居中顯示 c 怎麼設定子窗體在主窗體中居中 顯示問題的開始是由c 傳傳看主群裡的印醒提出來的,下面我來說一下解決方案吧 其實表面上看是很簡單的 開始吧,現在有兩個窗體form1主窗體,form2子窗體 而且我相信大部分人都會這樣寫 在子窗體的load事件中 這樣寫this...