初識css層疊上下文

css中有不少反人類直覺的東西，因此在學css的過程當中最大的樂趣不在於記住多少，而在於本身動手作實驗，一步步顛覆你的直覺，初學css層疊上下文，作了一些簡單的小實驗一步步驗證本身的想法。

broder層級在background之上，把broder設置透明，可透過它看到background的顏色。

內聯元素層級在border之上。

無論是兄弟仍是兒子，塊級元素的層級都是後來者居上，但內聯元素始終在塊級元素之上。

塊級元素的內聯元素也是後來者居上，藍色紅點是青色背景的內聯元素，覆蓋了以前塊級元素的內聯元素。

圖中粉色邊框黑色內聯元素的是浮動元素，它的塊級元素在全部塊級元素之上，可是它的內聯元素在全部內聯元素之下。藍色 > 黃色 > 黑色

下面一張圖很好的展現了這些元素之間的層級關係。

灰色背景是浮動，和黑色背景是同級元素，層級應該是後來者居上（上圖所示），可是在黑色背景上加position: relative，浮動元素就跑到他下面去了（下圖所示）。

兩兄弟元素被position: relative後且z-index:auto;，它們的子元素position:absolute後，它們之間的位置關係取決於z-index值的大小，誰大誰在上，若是兩個值相等則後來者居上。

兩個兄弟元素被position: relative定位後且z-index值不爲auto，那麼它們的子元素position:absolute後的位置關係和z-index的值沒有關係，後來者居上。