CSS - 元素層級問題

不同佈局方式元素的層級關係：

• 標準流 < 浮動 < 定位

不同定位之間的層級關係：

• 相對、絕對、固定的層級相同

• 此時HTML中寫在下面的元素會覆蓋上面的元素

例：

 表現出來就是：

 可以看到，此時green浮動後覆蓋了blue，表示浮動後元素層級 > 標準流

然後，給blue新增定位：

 就變成了：

 可以看到，給blue添加了定位之後，blue又覆蓋了green，表示定位後的元素層級 > 浮動 > 標準流

另外，觀察，如果給三個盒子都賦予定位，結果會如何呢？

 結果為：

 那麼，就一定是固定定位 > 絕對定位 > 相對定位了嗎？並不是

更換書寫位置：

 發現結果：

 由於此時green在書寫順序中排最後，所以它層疊了另外兩個盒子

由此可以得到結論：定位的盒子，層級是相同的，覆蓋順序由書寫順序所決定，即書寫在最後的就覆蓋前面所有的