首先明確幾點在文中所需要用到的概念：
1. 靜態定位：position:static（為position屬性的預設值）。
2. 動態定位：position:relative或position:absolute或position:fixed。
3. 祖元素：任意包含該元素的元素。
4. 父元素：直接包含該元素的祖元素。
5. 同輩元素：擁有共同的父元素的元素。
注：這些概念為作者自定義，僅用於本文。
引用:關於同輩元素是個非常關鍵的詞，這裡還需要詳細解釋一下。
在這個例子中，div#a與div#b並不是「同輩元素」，只有像div#b和div#c這樣擁有同樣父體div#f的的元素才能叫「同輩元素」。
引用結束
接下來看看這五條法則：
法則一：同輩元素定位方式相同，且無z-index設定時，html靠後者居上。
執行**框
[ctrl+a 全部選擇提示：你可先修改部分**，再按執行]
法則二：同輩元素同為動態定位時，且有z-index設定時，z-index值大者居上。
執行**框
[ctrl+a 全部選擇提示：你可先修改部分**，再按執行]
法則三：同輩元素定位方式不同時，動態定位居上。
執行**框
[ctrl+a 全部選擇提示：你可先修改部分**，再按執行]
法則四：非同輩元素，任意一者及其祖元素不具備動態布局時，html靠後者居上。
執行**框
[ctrl+a 全部選擇提示：你可先修改部分**，再按執行]
法則五：【重要】非同輩元素，任意一者或其祖元素擁有動態定位時，同時各自向上尋找動態定位的祖元素，並分別從中拿出具備最高端別的祖元素（或其本身）進行比較。
情況1：子元素的z-index無論多大，父元素大者居上。
情況2：父元素居下，子元素也可以居上。
情況1、情況2結合擴充套件比較。
執行**框
[ctrl+a 全部選擇提示：你可先修改部分**，再按執行]
引用:其實前四點都是基礎，只有第五點比較難於理解，這裡詳細解釋一下：
在這個例子中，我們來比較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的位置來進行比較。
引用結束
新手上路如何學習DIV CSS製作網頁
你知道如何使用div css製作網頁嗎，這裡和大家分享一下，因為web標準對 的要求提高了，沒有對xhtml 沒有一定的了解是無法通過校檢的。如何學習div css製作網頁 我接觸的很多人都問，如何學習web標準製作網頁呢？我想每乙個剛剛接觸web標準的人都會問這樣的問題，我就根據自己的經驗總結。1...
網頁製作 插入和設定框架
作業1 插入和設定框架 操作步驟 1.建立乙個 上方固定，右側巢狀 的框架頁。2.將滑鼠定於頂部框架內，選擇 檔案 在框架中開啟 開啟文擋 然後依次在左側和右側的框架內開啟文件 和 3.在框架面板中單擊第1層框架集邊框選擇整個框架集，然後選擇選單命令 檔案 儲存框架頁 將整個框架頁儲存為 4.在 屬...
第十二課設定網頁鏈結 製作「風味小吃」網頁
八年級資訊科技學科課題教學目標 2016 2017學年上學期 1課時第十二課設定網頁鏈結 製作 風味小吃 課時網頁1 設定網頁間超連結 2 設定網頁動態效果及網頁過渡效果3 使用互動式按鈕。1 設定網頁間超連結 教學重點 2 使用互動式按鈕教學難點使用互動式按鈕教學方法演示法講練結合法 內容分析 匯...