絕對定位篇

阿新 • • 發佈：2020-07-28

position:absolute

無依賴絕對定位。

當該元素沒有設定top,right,bottom,left任意一個或者多個值時，該元素無任何影響，否則它會去尋找最近有position：relative屬性的祖輩（沒有則是body元素），並基於該祖輩定位。

absolute的流體特徵

一般我們會根據閱讀或者文件流的順序（自上而下，從左到右）的需要，設定absolute的top，left就能達到定位效果。實際元素在被設定的方向上是“絕對定位”的特性，在另一個方向是保持著相對定位的特性。
談及流體特性，普通塊級元素在水平方向是具有流體特性的，然而絕對定位的元素具有類似的流體特性，某些情況下比普通塊級元素更強大。
absolute要實現自身的流體特性是有條件的，元素直接設定style=”position：absolute；margin：auto；“,外邊距margin：auto屬性是不會有任何計算的，那麼如何讓absolute元素擁有流體特性呢？條件是”對立方向同時發生定位“的時候。
流體特性最顯著的特點就是自動鋪滿流體方向上的空間。

實現元素鋪滿螢幕

<style>
  /* 方法一 利用流體特性的流動性*/
  .son {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
 
    left: 0;
   }
  
  /* 方法二 設定寬高 */
  .son {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
   }
</style>

二者的效果雖然相同，但是原理是不一致的，後者設定了寬高，此時元素失去了流動性，此時元素尺寸已被計算，此時新增內邊距，外邊距會造成”寬高溢位的表現。

利用absolute實現水平垂直居中對齊

<style>
  /* 方法一 */
  .foo {
    position: relative;
    width: 400px;
 
    height: 400px;
    background-color: lightseagreen;
   }

  .bar {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin:auto;
    width: 200px;
    height: 200px;
    background: #B03060;
   }
  
  /* 方法二 */
  .foo {
    position: relative;
    width: 400px;
    height: 400px;
    background-color: lightseagreen;
   }

  .bar {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
    background: #B03060;
   }
  
  /* 方法三 */
  .foo {
    position: relative;
    width: 400px;
    height: 400px;
    background-color: lightseagreen;
   }

  .bar {
    position: absolute;
    margin-top: 50%;
    margin-left: 50%;
    transform: translate(-50%, -50%)
    background: #B03060;
   }
</style>

定位元素對立方向只設置單屬性值時，該元素具有包裹性，包裹性包括包裹和自適應。

方法1是需要給絕對定位的元素設定寬高，該元素居中是自適應的，而大小是固定的；

方法2，3不需要設定絕對定位元素的寬高，該元素位置，大小都是自適應的，但是自適應尺寸最大不能超過父親內容尺寸的一半，強制設定大於父親內容尺寸的一半會改變佈局大小（chrome，Firefox的表現看不出來，ie11下的版本會有）