天天看點

css 定位差異特點

相對定位 relation

  • 移動方向
    • top、right、bottom、left
  • 特點
    • 隻加相對定位,不設定元素移動的位置,元素和之前是沒有變化
    • 根據自己原來位置計算移動的位置
    • 不脫離文檔流,元素移動走以後,原來的位置還會被保留
    • 加上相對定位後對原來的元素本身的特征沒有影響
    • 提升層級

      絕對定位 absolute

  • 移動方向
    • top、right、bottom、left
  • 特點
    • 完全脫離文檔流
    • 行内元素支援所有樣式 (與加上浮動或者inline-bolck以後的效果是一樣的)
    • 如果父級有定位,那位置會根據父級移動。如果父級沒有定位,那位置根據可視區定位 (一般情況下,要用到絕對定位的時候,都會給父級來一個相對定位)
    • 提升層級
    • 觸發BFC

      固定定位 fixed

  • 移動方向
    • top、right、bottom、left
  • 特點
    • 完全脫離文檔流
    • 行内元素支援所有樣式 (與加上浮動或者inline-bolck以後的效果是一樣的)
    • 相對可視區移動位置
    • 提升層級
    • 觸發BFC
    • IE6不支援

      預設值 static