相對（relative）定位和絕對（absolute）定位

原創

2019-08-28 18:15

原文鏈接：https://blog.csdn.net/qq_39561207/article/details/81805228

什麼叫脫離文檔流

脫離文檔流只是對html文檔的一種解析方案的說法而已。脫離文檔流是相對正常文檔流而言的。正常文檔流就是我們沒有用css樣式去控制的html文檔結構，你寫的界面的順序就是網頁展示的順序。比如寫了5個div塊。正常文檔流就是依次顯示這5個div塊。從左往右，自上而下的順序。脫離文檔流就是指它所顯示的位置和文檔代碼就不一定一致了。比如可以用css控制，把最後一個div塊顯示在第一個div塊的地方。這個只是瀏覽器的處理方案。但是，dom結構是沒有發生變化的。仍舊和你寫的html文檔一樣。用js取這個節點可以取到的。

1.相對定位（relative）

相對於原來位置（原來位置指在文檔流中默認的位置，若加上了浮動時，那麼這個原來位置就是你設定浮動時的位置）的偏移，原來位置依然佔據空間。

（1）box1和box2都沒有設置position屬性（沒有設置float屬性時）

效果圖：我們可以看出box盒子設置的left（包括top，right，bottom等）屬性根本沒起到任何作用

（2）給box2加上position：relative，效果如圖：這時候box2相對於原來的位置分別向右和下偏移了100px

（3）有float屬性時：

（4）效果圖：

（5）給box2加上position：relative後：相對於原來的位置偏移

（6）給兩個標籤都加上position：relative時：兩個盒子都只相對於自己原來的位置偏移

2.絕對定位（absolute）：

絕對定位是相對於元素最近的已定位的祖先元素（即是設置了絕對定位或者相對定位的祖先元素）。如果元素沒有已定位的祖先元素，那麼它的位置則是相對於最初的包含塊（body）。

絕對定位本身與文檔流無關，因此不佔空間，普通文檔流中的元素的佈局就當絕對定位的元素不存時一樣，所以它們可以覆蓋頁面上其他的元素，且可以通過z-index屬性來控制這些層的對方順序。

如下所示設置

<view class='view_constar11'>
  <view class="box011">box011</view>
  <view class="box012">box012</view>
  <view class="box013">box013</view>
</view>

.view_constar11{
  height: 230px;
  border: 1px solid red;
  display: flex;
  flex-direction: row;
}
.box011{
  width: 100px;
  height: 100px;
  background-color: #00ffff;
}

.box012{
  width: 100px;
  height: 100px;
  background-color: #fa8072;
 /*position: absolute;
   top: 20px;
  left: 20px; */
}

.box013{
  width: 100px;
  height: 100px;
  background-color: #7fff00;
}

我們設置整體爲橫向顯示，也就是整體的文檔流方向正常是按照圖1顯示，當設置box012設置absolute和top、left時會發現box012已經脫離了文檔流，box011和box013的排布相當於不考慮box012的存在。當同時box012也會覆蓋到着個box