本宮今日遇到一難題：
<style> html, body { font-size: 100px; } #box { width: 3rem; height: 3rem; background: #f4f54f; position: relative; } .position { height: 50%; } .absolute { width: 80%; background: #34f3e5; position: absolute; top: 0; left: 0; } .relative { width: 50%; position: relative; background: #7d4c5a; } </style> </head> <body> <div id="box"> <div class="position absolute"></div> <div class="position relative"></div> </div>
當我把 absolute 與 relative 對換位置：
<div id="box"> <div class="position relative"></div> <div class="position absolute"></div> </div>
當兩個同級子元素 absolute 和 relative，為啥 relative 可以覆蓋在 absolute 上面？？？
當對換位置后，relative 和 absolute，又為啥 absolute 又覆蓋了 relative ？
兩個方向
1. 遵循 DOM 的規則，同級的后面居上，but！absolute 不是脫離文檔流了嗎？
2. BFC 影響
首先聲名，這里沒有使用 z-index 屬性～
當不對換位置，即
<div id="box"> <div class="position absolute"></div> <div class="position relative"></div> </div>
關於relative元素的定位：不設置 或 設置了 relative 定位的效果對比：
我的天啊！ relative 定位是在 static 的基礎上加了 z-index 的效果嗎？？？
w3c對 position的值的解讀：
absolute：生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
relative：生成相對定位的元素，相對於其正常位置進行定位。因此，"left:20" 會向元素的 LEFT 位置添加 20 像素。
static：默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。
大多數時候我只記得：
1. absolute 相對最近的已定位的父元素，若一直沒有，就將以瀏覽器左上角為准定位。
2. relative 相對父元素定位。
其實：
1. relative、absolute、 float都脫離文檔流了！！所以不設置與設置了 relative 定位的效果對比會有差異，而 relative 的元素脫離正常的文本流，但其在文本流中的位置依然存在；
2. z-index 是同級元素之間的層級堆疊， 當父子層級中，不生效，必須是子在父下。
3. static（默認定位）的元素 z-index 屬性是無效的！
雖然我也不知道我在說啥，但是造成今天遇到的問題的原因大概就是：
absolute 和 relative 都脫離文檔流了，當時其 dom 順序決定樣式，誰在后面誰層級高。后面是 relatve 時， relatve 蓋在了 absolute 的上面。