自由使用層的疊加

[參與測試的瀏覽器：ie6 / ie7 / ie8 / ff3 / op9.6 / sf3 / chrome2 ]

[作業系統：windows]

貌似很多同學對為什麼這個div在上層，那個div在下層、無論如何設定z-index都無法居上的問題糾結抓狂、上吐下瀉、噁心失眠、鬱鬱而終，致使不敢隨意使用層的疊加。

但層的疊加效果，在互動設計中卻頻頻出現，所以我們必須駕馭它，要駕馭它，就要掌握其規律。

首先明確幾點在文中所需要用到的概念：

1. 靜態定位：position:static（為position屬性的預設值）。

2. 動態定位：position:relative或position:absolute或position:fixed。

3. 祖元素：任意包含該元素的元素。

引用:

關於同輩元素是個非常關鍵的詞，這裡還需要詳細解釋一下。

複製內容到剪貼簿

**:

在這個例子中，div#a與div#b並不是「同輩元素」，只有像div#b和div#c這樣擁有同樣父體div#f的的元素才能叫「同輩元素」。

法則一：同輩元素定位方式相同，且無z-index設定時，html靠後者居上。

法則二：同輩元素同為動態定位時，且有z-index設定時，z-index值大者居上。

法則三：同輩元素定位方式不同時，動態定位居上。

法則四：非同輩元素，任意一者及其祖元素不具備動態布局時，html靠後者居上。

法則五：【重要】非同輩元素，任意一者或其祖元素擁有動態定位時，同時各自向上尋找動態定位的祖元素，並分別從中拿出具備最高端別的祖元素（或其本身）進行比較。

情況1：子元素的z-index無論多大，父元素大者居上。

情況2：父元素居下，子元素也可以居上。

情況1、情況2結合擴充套件比較。

引用:

其實前四點都是基礎，只有第五點比較難於理解，這裡詳細解釋一下：

複製內容到剪貼簿

**:

在這個例子中，我們來比較div#a_inner5和div#b_inner4的層疊關係。

到它們所共同擁有的祖元素div#ab的下一級為止，div#a_inner5的祖元素包括：div#a,div#a_inner1,div#a_inner2,div#a_inner3,div#a_inner4；div#b_inner4的祖元素包括：div#b,div#b_inner1,div#b_inner2,div#b_inner3。

然後分析它們的祖元素中具有動態定位的：div#a_inner5的祖元素中含有動態定位的元素有：div#a,div#a_inner3；div#b_inner4的祖元素中含有動態定位的元素有：div#b_inner3。

然後再拿出最高端進行比較：div#a

>

#div#b_inner3。

父元素居下，子元素也可以居上的情況，則是利用非同輩元素在祖元素具備動態布局時，其比較已經與position:static無關，而其祖元素卻可以通過html的位置來進行比較。

CSS層的疊加

在常用html編寫中，有很多地方用到兩個層的疊加，也就是兩個層的位置的設定問題。其實沒有那麼複雜，在此做個簡單的演示，一看便知。層裡面你可以放或其他什麼的。像現在的 購買按鈕那塊用到的比較多 這個層為外面的父層，只需設定相對位置樣式即可 這個為裡面要疊加的層，只需設定絕對樣式 備註 1，父層和子層以...

hw疊加層開還是不開 HW疊加層是什麼？

拓撲疊加分析 拓撲會加分析是把分散在不同層上的空間屬性資訊按相同的空間位置加到一起合為新的一層，該層的屬性由被疊加層各自的屬性組合而成，這種組合可以是簡單的邏錯合併的結果，也可以是複雜的函式運算的結果，拓撲疊加分析易土地資訊系統最基本最常用的分析功能，按疊加形式可分為點與點的疊加 面與面的疊加，線與...

hw疊加層開還是不開 停用hw疊加層有什麼用

展開全部 hw在這裡的意思是硬體加速，疊加層的意思是指使用cpu來進行輔助運算，而不單單使用gpu來進行全部渲染工作。因為單純使用gpu進行渲染會相對更加費電，所以一般預設是開啟hw疊加層的，這樣既能有效避免一直硬體加速帶來的高功耗，也有效提高手機流暢度，做到效能與功耗的雙均衡。擴充套件資料 hw硬...