CSS之定位相關

###爲什麼要使用定位

• 當需要修改元素出現的位置, 則需要使用定位
  ###定位分類
• 浮動定位 float: left/right
• 普通流定位 position: static (默認), 靜態定位
• 相對定位 position: relative
• 絕對定位 position: absolute
• 固定定位 position: fixed
  ###浮動定位
• 什麼是浮動定位
  • 將元素摘離普通流,元素在頁面中不佔用普通流空間
  • 浮動元素會放在父容器的左側或右側,但依然包含在父容器內
• 浮動定位的特點
  • 浮動元素外邊緣不會超過父容器的外邊緣
  • 浮動元素默認不會重疊
  • 浮動元素只能左右浮動,不能上下浮動
  • 對於所有元素,若是設置爲浮動元素,則默認轉換爲塊級元素
• float: none(默認)/left/right;
  • 注意: 若在一個容器內存在浮動元素,則儘可能讓容器內的元素全部浮動起來。
• A Problem
  • 父容器內的元素被float之後,父容器的高度會變爲0(若父容器未設置高度)
  • 解決方案有如下4種:
    • 在父容器末尾添加標籤並使之清除浮動(此法瀏覽器兼容性好,但語義不準確,不推薦)

      <div style="clear:both"></div>或<br style="clear:both"/>

    • 爲父元素設置:after僞元素(此法瀏覽器兼容性較好,且語義準確無污染,故推薦使用)

      .parentContainer:after{
      content: ‘’;
      display: block;
      clear: both;
      }

    • 爲父元素設置overflow:hidden/auto;(此法語義不準確,且會造成頁面污染,極不推薦)
    • 讓父元素也浮動起來,這利用了浮動的一個特性——浮動元素會閉合浮動元素(此法語義不準確,且會造成頁面污染,極不推薦)
      ###普通流定位
• 即文檔流,網頁中默認的定位方式
  ###相對定位
• 什麼是相對定位
  • 相對元素本該出現的位置偏移某距離
• 使用場合
  • 通過操作(鼠標移入), 實現元素位置的微變
  • 配合絕對定位一起使用
    ###絕對定位
• 參考物
  • 該元素外層的非static(relative,absolute,fixed)定位的元素或者window
• 使用場合
  • 彈出菜單
    ###固定定位
• 什麼是固定定位
  • 將元素固定在網頁的某個位置處, 不隨滾動條滾動
• 使用場合
  • 小廣告
  • 返回頂部
• 多數都相對於window實現固定定位