我怎麼弄都不一樣的 position
See the Pen JgExGg by iigmir (@iigmir) on CodePen.
問題解決
今天我碰上了一個奇怪的問題：我需要從底部對齊三張高度不同的圖。
如果是從底部對齊的話，我很快就想到用 position: absolute; 實做：
- 首先在母元素設置
position: relative;，以給接下來的position: absolute;一個參照位置。 - 然後在子元素設置
position: absolute;讓它參照母元素對齊。 - 最後用
bottom: 0;讓它從底部開始設定位置。完成。
但事情卻不是這樣：我發現圖片如果全都用 position: absolute; 的話，整個母元素就會全部崩潰，像第二個框那樣。
……可我用瀏覽器設定個別元素的 CSS，它不會崩掉啊？
等等，如果是個別元素的話，那<strong>要是我不給其中一個子元素用 position: absolute; 會怎樣？</strong>於是我給圖片高度最高的子元素設 position: static;，圖片就真的像第三個框那樣沒垮了。
但是為什麼呢？我不明白，只好回家寫寫東西。
為什麼
後來回家想解這個謎，就去看 MDN 的說明。接著看到 absolute 是這麼寫的：
The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block.
簡單來說 absolute 屬性會從一般的文件排版剔除、不給它留下任何空間；並參照上一個不用 position: static; 的母元素。否則就參照網頁本身。
我想重點是在<strong>不給它留下任何空間（no space is created for the element）</strong>吧：沒有空間的元素，自然就像 float 那樣整個崩掉。因此，在設立多個 absolute 屬性對齊時，你需要一個 position: static; 的元素穩住，要不然所有屬性都跳脫一般的排版流，它就會崩給你看。
另外，也因為 MDN 說是不用 position: static; 的母元素，所以如果 position: absolute; 的母元素是 absolute 或 fixed 也行。
最後
最後寫文章時，我突然想到這名言：
この幻想郷では常識に囚われてはいけないのですね！ -- <cite>東風谷早苗</cite>
畢竟一個常識滿滿的普通人來到一個新世界，就換他沒常識了。