http://learn.shayhowe.com/advanced-html-css/detailed-css-positioning

LESSON 2

Detailed Positioning  定位細節

這個章節主要是講內容是如何浮動，position的細節，包括如何準確定位x y z 的位置

1. Containing Floats

1. DOM - Document Object Model -  element 彼此間的關係：樹狀、
2. float：

• 父元素包含太多浮動的子元素，內容會跟著浮動的子元素跑，並不會按照附元素原本的容器大小跑，這種常見的問題通常是因為父元素沒有高度，或是其他缺少的元素造成的，或是父元素根本沒有任何的style設定。
• 通常加上 clear: both 可以解決這樣的問題
• float元素的父曾有使用 overflow: auto 時：

1. IE6 必須要有 height 跟 width
2. 在apple上的 IE 如果使用overflow: auto 會讓父元素增加一個 scrollbar ，所以最好使用overflow:hidden

• overflow溢出：使用overflow會有些不足的情況，例如你要加上box-shadow的時候，不同瀏覽器會有被裁切跟跑出scrollbar的問題。

3. Clearfix 技術

• 在父元素上使用擬元素：在父元素的上方跟下放裡面建立隱藏的元素

1. :before 用來防止含有top margin的子元素被擠壓，使用的方法是建立一個假的 table-cell的元素。這樣可以確保IE6跟IE7的一致性
2. :after 用來防止bottom margin 的字元素崩壞
3. *zoom 針對IE6,IE7 hasLayout 機制，用來決定元素怎麼繪製內容的邊界

• 更有效綠的 float使用方式

1. 使用 group 的方法  (重複使用性)
2. 如果單獨擬元素，可能無法達到預期效果

2. Position Property

1. Position Static 如果元素default 是 static 代表沒有特定的 box offset properties
2. Position Relative 跟static 很類似唯一的差別是能夠設定offset porperties top right bottom left 等位置 (relative, absolute, fixed )

• 範例：雖然是relative 但彼此還是堆疊在另一個的上方

3. Position Absolute  當元素有修正過得高度跟高度，top 拿到較高的優先權
4. Position Fixed 跟absolute 很像
5. Fixed Header 跟 Footer

3. Z-index Property

1.  當你有 position relative,absulute fixed 的時候 z-index 的數字決定堆疊的層級