Absolute 和 Relative

李增田發布于2019-08-30 12:47 / 1960人閱讀

摘要：在中，元素的大小是不變的，通過設置等屬性，改變元素相對于自身的位置。所以被的元素，是可能會和其他元素重疊的，但是不會對之后的元素的位置有影響。被稱為絕對定位。絕對定位的元素是根據其決定的，完全脫離，對后續的兄弟節點的布局無任何影響。

花了一個周末的時間，把 css-postion 的標準讀了一遍，把關于 Absolute 和 Relative 的部分的理解在這里記錄一下。

Positioning schemes

在 css 中，有三種定位方案:

Normal flow

Floats

Absolute positioning

Normal flow 是最常見的 BFC 和 IFC，也就是常說的塊級元素從上到下，內聯元素從左到右布局的情況；Floats 即常見的盒子水平布局的情況；Absolute positioning 讓盒子完全脫離 Normal flow，通過設置 top，left 等屬性來決定 position。

注意：這里只說到 Floats 和 Absolute 是 out-of-flow 的，沒有說 Relative。我看過很多文章都說 Relative 也讓盒子脫離了流，是錯誤的說法（我就深受其害）。

Containing Blocks

一個元素的盒子的位置和大小通常是由一個特定的矩形計算出來的，這個特定的矩形就是元素的 containing block。對于 static 和 relative 的元素，它的 containing block 同普通盒子，一般是指包含它的最近的父級元素（nearest ancestor）。對于 fixed（不在這次文章之內，按下不表）和 absolute 有如下的表現:

containing block 被最近的positon不等于static的祖先元素創建:

如果最近的祖先元素是塊級元素(block-level)，containing block 由盒子的內邊距層(padding edge) 創建。

如果最近的祖先元素是內聯級元素(inline-level)，那么containing block 由書寫模式的 direction 屬性決定。這種情況比較少用，不分析了。

如果沒有祖先元素，或者祖先元素沒有設置 position 為 static 以外的值，那么 containing block 就是 initial containing block。

注意：對于上面第三點，initial containing block 并不是指 body，我看到很多文章都把這里說成 body。

Relative positioning

相對定位：是相對于自己定位。在 normal flow 中，元素的大小是不變的，通過設置top等屬性，改變元素相對于自身的位置。所以被 relative 的元素，是可能會和其他元素重疊的，但是不會對之后的元素的位置有影響。一個相對定位的盒子會為后代節點創建一個新的絕對定位的 containing block。

Absolute positioning

對于 position： absolute 和 position： fixed 都是指 Absolute positioning。本文暫只討論 position: absolute。 Absolute positioning 被稱為絕對定位。絕對定位的元素是根據其 containing block 決定的，完全脫離 normal flow，對后續的兄弟節點的布局無任何影響。一個絕對定位的盒子會為后代節點創建一個新的絕對定位的 containing block 和為子節點創建一個 normal flow 的containing block

top, right, bottom, left

當一個元素的 position 屬性被設置了除 static 之外的值，這個元素的位置可以被 top, right, bottom, left這四個物理屬性決定。注意，在同時設置 left、right 或者 bottom、top 的時候會出現競爭情況。

結尾

因為女朋友在學 css，需要我在旁指導而 css 一直是我的弱項，所以我花了一個周末時間把 css-position 的標準梳理了下，這樣指導起來也比較有底氣。這篇文章基本都是對下面參考的鏈接的筆記，我之前學這部分的內容時，都是從網上找的別人的博客看的，有很多和標準出入的地方，這一天也解了不少的疑惑；如果有想學的同學，還請直接看 css-positon 的草案比較靠譜，而且草案中 example 也有不少。

參考:

草案

云服務器 GPU云服務器 relative absolute position:absolute absolute居中

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://www.hztianpu.com/yun/115068.html

相對定位(Relative positioning)

摘要：當一個盒根據常規流或者浮動擺放好后，它可能會相對于該位置移動，這叫相對定位。當一個盒根據常規流或者浮動擺放好后，它可能會相對于該位置移動，這叫相對定位。相對定位的盒保持它在常規流中的大小，包括換行和空格都會原樣保留 relative與absolute,fixed relative與absolute的關系在例1中,absolute元素的top/left:0的定位在瀏覽器窗口的左...

cyixlq 2019-08-29 12:32 評論0 收藏0
通過案例理解position:relative和position:absolute

摘要：并沒有脫離普通流，只是視覺上發生的偏移。上面的案例中，將第二個子級元素換為內聯元素，子元素下的起點位置并沒有改變。 w3school過了HTML的知識之后，覺得要自己單純地去啃知識點有點枯燥，然后自己也很容易忘記，所以便找具體的網站練手便補上不懂的知識點。position:relative和postion:absolute困擾了我快一個星期之久，網上找到的資料魚龍混雜，剛確定這樣的理解...

miqt 2019-08-29 11:17 評論0 收藏0
通過案例理解position:relative和position:absolute

摘要：并沒有脫離普通流，只是視覺上發生的偏移。上面的案例中，將第二個子級元素換為內聯元素，子元素下的起點位置并沒有改變。 w3school過了HTML的知識之后，覺得要自己單純地去啃知識點有點枯燥，然后自己也很容易忘記，所以便找具體的網站練手便補上不懂的知識點。position:relative和postion:absolute困擾了我快一個星期之久，網上找到的資料魚龍混雜，剛確定這樣的理解...

codergarden 2019-08-01 15:44 評論0 收藏0
探究position定位中absolute和relative的異同

摘要：總結一下定位相對于誰進行定位有點復雜就是找出定位元素父元素鏈上的所有父元素，由近到遠哪個元素不是默認定位即定位的，那么就相對于它進行定位。當父元素鏈上所有父元素都是默認定位，那么定位就是相對于元素的，效果和定位差不多。相信學過CSS的同學都曾經對于position的各種屬性很困惑，尤其是absolute和relative定位，簡直就是傻傻分不清，筆者寫這篇文章就是希望通過代碼實驗的方...

NickZhou 2019-08-29 13:57 評論0 收藏0
css position: absolute、relative詳解

摘要：在使用相對定位時，無論元素是否進行移動，元素依然占據原來的空間。放置絕對定位對象在可視區域之外會導致滾動條出現。相對定位是相對于元素在文檔流中初始位置的，而絕對定位是相對于最近的已經定位的祖先元素。 CSS2.0 HandBook上的解釋：設置此屬性值為 absolute 會將對象拖離出正常的文檔流絕對定位而不考慮它周圍內容的布局。假如其他具有不同 z-index 屬性的對象已經占...

h9911 2019-08-28 18:00 評論0 收藏0