該文章總結(jié)自張鑫旭慕課，以及自己的使用經(jīng)驗和建議。

絕對定位absolute使用建議

建議無依賴相對定位relative來使用，需要用到偏移的時候用到margin值來實現(xiàn)，同時，沒有依賴的絕對定位偏移的基礎(chǔ)是<u>原來的包含塊</u>。

<u>無依賴絕對定位</u>的特性：

位置跟隨（此時絕對定位的元素是不占據(jù)任何空間的，注意在ie6&ie7下絕對定位會把元素inline-block化）

使用注意：

• 絕對定位中``````可以消去空格，保證完美的貼合
• 由于絕對定位脫離文檔流的屬性，動畫盡量作用在絕對定位的元素上。

無依賴絕對定位的應(yīng)用：

• 利用margin來進(jìn)行圖片偏移，更適合自適應(yīng)布局
• 下拉框定位最佳實踐（無依賴）
• 對齊居中或邊緣
  • 居中（并不是最佳實踐）
    使用text-align：center和position: absolute;margin-left: -xxpx;來實現(xiàn)

    <div style="text-align: center;">
         //重點就是在這里
        <img style="width: 200px;position: absolute;margin-left: -100px;">
    <div>
    

  • 邊緣跟隨最佳實踐
    與上面的例子相似，只不過用text-align：right;,然后把邊緣的那個div設(shè)置為inline（注意fix和absolute的區(qū)別，fix其實算是絕對定位，只是它是根據(jù)于瀏覽器視窗口）
  • 溢出不換行（注冊頁面的tip提示）

絕對定位z-index無依賴

誤區(qū)：絕對定位元素都需要z-index控制層級，確定其顯示的垂直位置

• 如果只有一個絕對定位元素，自然不需要z-index，自動覆蓋普通元素
• 如果兩個絕對定位元素，控制DOM流的前后順序達(dá)到需要的效果，依然無z-index
• 如果多個絕對定位交錯，非常非常少見，z-index: 1;控制
• 如果非彈框類的絕對定位元素z-index>2，便是冗余

absolute與height、width的應(yīng)用

注意：top,bottom,left,right百分比是依賴于父元素的寬高的（如果沒有限制的父元素就是整個文檔）

• 全屏自適應(yīng)黑色半透明遮罩層

  html.body {
      height: 100%;
  }
  .overlay {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
  }
  

  或者（沒有寬高也能實現(xiàn)）

  .overlay {
      position: absolute;
      left: 0;top: 0;right: 0;bottom: 0;
      ...
  }
  

  可見，如果絕對定位方向是對立的，結(jié)果是相互拉伸而不是瞬間位移。所以下面其實是等價的（拉伸和width/height相互代替）ie7+

  position: absolute; left: 0;top: 0;bottom: 0;width: 50%;
  ===
  position: absolute; left: 0;top: 0;bottom: 0;right: 50%;
  

  其他的情況也是類似的。

• 如果想要制作一個遮罩層距離右邊200px，可以這樣實現(xiàn)

  .overlay {
      background-color: #000;
      position: absolute;
      right: 200px;
      top: 0;
      left: 0;
      bottom: 0;
  }
  

  如果使用width，就必須用到css3，這在兼容性上就大打折扣。

  .overlay {
      background-color: #000;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      width: calc(100% - 200px);//存在兼容性問題
  }
  

  所以，這種拉伸的效果代替寬度有兩個優(yōu)點：

  • 容器無需固定width和height，內(nèi)部也可以拉伸
  • 容器拉伸，內(nèi)部元素支持百分比width/height值

• 如果拉伸屬性和width/height同時存在，width/height設(shè)置的尺寸會大于拉伸屬性設(shè)置的尺寸
  如：下面的寬度是50%而不是100%

  position: absolute;top: 0;left: 0;right: 0;bottom: 0;width: 50%;
  

  相互合作性：

  position: absolute;left: 0;right: 0;width: 50%;
  

  此時，假設(shè)上面的代碼給它加一句margin: auto，就能實現(xiàn)水平居中了。(ie8+)

• 絕對定位居中

  position: absolute;left: 0;right: 0;bottom: 0;top: 0;height: xxx;margin: auto;//必須有高度
  

  可見，top/bottom與height結(jié)合可以實現(xiàn)垂直居中，left/right與width結(jié)合可以實現(xiàn)水平居中

利用絕對定位實現(xiàn)WEB整體布局效果（總結(jié)）

• 做遮罩層

html,body {
    height: 100%;
}//這里可以不需要
.overlay {
    position: absolute/fixed;//覆蓋整個document用fixed
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

• 各個模塊各居其位（適合用于移動端開發(fā)，頭尾固定中間顯示信息，解決ios中fixed兼容性問題）

  • 頭尾

  header,footer {
      position: absulote;
      //水平拉伸
      left: 0;
      right: 0;
  }
  header {
      height: 48px;
      top: 0;
  }
  footer {
      height: 52px;
      bottom: 0;
  }
  

  • 側(cè)邊欄

  aside {
      width: 250px;
      position: absolute;
      left: 0;
      //高度百分之百拉伸
      top: 0;
      bottom: 0;
  }
  

  • 內(nèi)容區(qū)域想象成body

  content {
      position: absolute;
      top: 48px;//頭部高度去除
      bottom: 52px;//尾部高度去除
      left: 250px;//如果有側(cè)邊欄的話
      overflow: auto;
  }
  

  • 全屏覆蓋要與整個大容器平級（不是content而是整個大div）

  <!--全屏拉伸.overlay的css代碼-->
  <div class="page"></div>
  <div class="overlay"></div>
  

• 水平垂直居中定位（略）