css定位z index問題

1. 某些瀏覽器下元素層級遮蓋存在bug;

2. 某個元素z-index設的太大，導致始終無法被遮蓋;

3. js動態計算z-index，導致元素覆蓋關係部可控

[img]

層級遮蓋bug出現的原因：

[color=red]ie6/7對z-index的表現跟ie8及以上瀏覽器不一致。position值為非static時，如果不設定z-index屬性，ie6/7下z-index預設為0，而ie8及以上瀏覽器z-index為auto，且zindex:auto的元素不參與堆疊優先順序比較。[/color]

ff/chrome z-index ie6/7 ie8/9

不設定 0 auto auto

number number number number

層級關係的比較：

先看幾點結論：

1. 對於同級元素，預設(或position:static)情況下文件流後面的元素會覆蓋前面的;

2. 對於同級元素，position不為static且z-index存在的情況下z-index大的元素會覆蓋z-index小的元素，即z-index越大優先順序越高;

3. ie6/7下position不為static，且z-index不存在時z-index為0，除此之外的瀏覽器z-index為auto

4. z-index為auto的元素不參與層級關係的比較，由向上遍歷至此且z-index不為auto的元素來參與比較。

在上面2點結論的基礎上，我們引入「定位樹」(非w3c官方詞彙)的概念來做層級的比較。

在定位樹這個概念下，瀏覽器在渲染dom節點時，除了生成dom樹之外，還會根據dom樹中的定位元素(position不為static)生成「定位樹」：

dom樹、定位樹對比如下(其中邊上有紅色圓圈的表示該元素position不為static)：

[img]

[img]

可以這樣理解：定位樹中包含了dom樹中position不為staitc的全部元素。非同級元素比較層級關係可以這樣比較：

1. 向上遍歷定位樹的父節點直到2個元素為同級元素。

2. 根據上面的結論來最最後的比較。層級高的元素會越靠近使用者的顯示器並能覆蓋層級低的元素。

例項一：假設上圖中所有標紅色元素position都不為static;且z-index=1，根據上面的比較規則可以知道：

1. c > (b && b *) > (a && a *) 即元素c及c的所有定位元素層級比a、b高

2. m > h、 g > k、d > m

例項二：假設a的position不為static，z-index屬性不存在，定位樹中a的子元素z-index一次分別為1,2,3,4...其它定位元素z-index:1：

1. 根據結論三有：ie6/7下 b > (a && a *) 即元素b的層級比a及a的所有定位元素層級高，其它瀏覽器下：i > h > b > d

css定位z index問題

1.某些瀏覽器下元素層級遮蓋存在bug 2.某個元素z index設的太大，導致始終無法被遮蓋 3.js動態計算z index，導致元素覆蓋關係部可控 層級遮蓋bug出現的原因 ie6 7對z index的表現跟ie8及以上瀏覽器不一致。position值為非static時，如果不設定z index...

CSS 定位，z index和透明度

css 定位 position 屬性允許你對元素進行定位。static 預設。位置設定為 static 的元素，它始終會處於頁面流給予的位置 static 元素會忽略任何 top bottom left 或 right 宣告 relative位置被設定為 relative 的元素，可將其移至相對於其...

P 9 CSS基礎 定位與z index

相對於原來的位置進行偏移，仍然在標準文字流中，原來的位置仍然保留 語法 position relative positon relative 相對定位 向右移動 向左移動 left 20px left 20px right 20px right 20px 向上移動 向下移動 top 20px top...