直入主題：

CSS定位的三種機制：
一.普通流：
  position: static 元素框正常生成，預設設定。
  position: relative  元素相對於它本來的位置，注意：移動後，在原來的位置會佔用一個相同大小的空間。
二.絕對定位：
  position：absolute 相對於最近一層的設定了定位的父級元素（除去static）（可以向上尋找滿足條件的父級元素），
                  在沒有設定了定位元素的父級元素時，相對於HTML根元素定位（不是相對於body）
  position: fixed  相對於視窗（瀏覽器）定位
三.浮動：（只有元素設定或者繼承了position: relative,position: static浮動才會生效（其它屬性的position，如pisition:flex會讓浮動失效））
float: left/right 元素向左/右移動，知道碰到塊的邊框，或者碰到另一個浮動元素。
  注意：1.浮動後不會佔據原來的空間，所有元素都以塊級元素展示。
            2.如果浮動框總寬度超過容器，那麼浮動塊下移。

            3.如果各個浮動的塊高度不同，那麼可能位置出現錯位。（如圖）

元素設定百分比屬性時，相對於誰：
一:width:
    width的百分比相對於最近一層的父級元素（因為最近一層的父級元素肯定有確定的寬度，所有不用向上尋找）。
    注意：當元素設定了絕對定位之後，相對於最近一層設定了定位的父級元素（除去static）（此時可以向上尋找滿足條件的父級元素），在沒有設定絕對定位父級元素時，相對於HTML根元素。
二.height:
    height: height的百分比相對於最近一層的父級元素（父級元素高度由內容決定時即auto,則元素的百分比高度不會生效,不會向上尋找父級元素）
    注意