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:
  1. IE6 必須要有 height 跟 width
  2. 在apple上的 IE 如果使用overflow: auto 會讓父元素增加一個 scrollbar ,所以最好使用overflow:hidden
  1. Clearfix 技術
  1. :before 用來防止含有top margin的子元素被擠壓,使用的方法是建立一個假的 table-cell的元素。這樣可以確保IE6跟IE7的一致性
  2. :after 用來防止bottom margin 的字元素崩壞
  3. *zoom 針對IE6,IE7 hasLayout 機制,用來決定元素怎麼繪製內容的邊界
  1. 使用 group 的方法  (重複使用性)
  2. 如果單獨擬元素,可能無法達到預期效果
  1. Position Property
  1. Position Static 如果元素default 是 static 代表沒有特定的 box offset properties
  2. Position Relative 跟static 很類似唯一的差別是能夠設定offset porperties top right bottom left 等位置 (relative, absolute, fixed )
  1. Position Absolute  當元素有修正過得高度跟高度,top 拿到較高的優先權
  2. Position Fixed 跟absolute 很像
  3. Fixed Header 跟 Footer
  1. Z-index Property
  1.  當你有 position relative,absulute fixed 的時候 z-index 的數字決定堆疊的層級