CSS:絕對定位和相對定位
CSS:絕對定位和相對定位
CSS定位一直以來都是建立網頁佈局很重要的一部分。儘管有一些新的CSS佈局例如Flexbox和CSS Grid出現。定位依舊在任何一個網頁設計者的佈局技巧中佔有著重要的位置。
- static （靜態）
- absolute （絕對）
- relative （相對）
- fixed （固定）
靜態定位（Static)
靜態是任何一個元素在網頁上的預設位置。如果你不定義一個元素的定位，那麼它就是靜態的。意味著它在螢幕上的顯示方式基於HTML的標準文件流，也就是元素在HTML文件中的預設位置。
如果你應用定位規則（例如 top或left）在一個擁有靜態定位的元素上。這個規則會被忽略，而元素將會按照它在HTML標準文件流出現的方式出現。你將會很少需要設定元素的定位為靜態，因為它是預設
靜態定位這樣書寫：
position:static;
以下是示例網頁（H5標準）：
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Test</title>
<style>
*{margin: 0;padding: 0}
#a{width: 200px;height: 200px;background-color: red;}
#b{width: 200px;height: 200px; 
將塊A的定位設定為靜態：
#a{position:static;width: 200px; 可以看到網頁佈局無變化：
絕對定位(Absolute)
絕對定位可能是最容易理解的CSS定位。絕對定位這樣書寫：
positon:absolute;
這個值告訴瀏覽器，這個元素將會被移出標準文件流而不是放置在頁面的確定位置。然後這個元素計算定位時將會匹配與它最近的父級非靜態元素。因為一個絕對定位的元素被移出了標準文件流，它隻影響在網頁中這個元素出現之前和之後的元素定位。
舉個例子，如果你有一個div元素用了相對定位。那麼在這個DIV的內部，如果你想放置一個段落在距離這個div頂部50畫素的距離，你需要為這個元素的position屬性新增一個值：absolute 以及新增一個屬性top併為它賦初值50px。
position:absolute;
top:50px;
我們看一看示例網頁,為塊B新增一個子元素B_1，先設定塊B為相對定位，然後設定B_1為絕對定位，並給top屬性的值設定為50畫素：
CSS:
#b{position: relative;width: 200px;height: 200px;background-color: green;}
#b_1{position: absolute;top:50px;width: 100px;height: 100px;background-color:black;}
HTML:
<div id="b">
<div id="b_1"></div>
</div>
可以看到位置的變化：
這個絕對定位元素將會始終距離相對定位的DIV塊的頂部50畫素，無論在標準文件流的其他元素元素如何顯示。你的絕對定位元素需要使用相對定位的一個元素作為它的父級元素，你設定的值是相對於這個元素而定位的。
你能夠使用的四個定位屬性是：
-
top(頂部)
-
right（右邊）
-
bottom（底部)
-
left(左邊)
你只能對一個元素使用top和bottom中的一個屬性，因為一個元素不能基於同方向的兩個屬性值來定位。
（同理，你也只能使用right和left中的一個）
如果一個元素設定了絕對定位，但是它沒有非靜態的父級元素，那麼它將相對於頁面中最高級別的元素
body元素來定位。
我們設定div元素a為絕對定位並設定距離左邊為50畫素，a的沒有已經定義的父級元素:
(為了方便展示，這裡我們為div元素b設定了不透明度50%)
#a{position:absolute;left:50px;width: 200px;height: 200px;background-color: red;}
可以看到設定a元素距離頁面最左邊為50畫素生效，而此時頁面中塊元素的上下順序被打亂。原因是：a元素設定絕對定位後被移出標準文件流，所以不再按照HTML文件中的元素出現順序排列。
相對定位(Relative)
相對定位使用了類似絕對定位的四個定位屬性。但是與絕對定位基於最近的非靜態父級元素相比，相對定位元素的位置取決於它本來在標準文件流中應該出現的位置。
舉個例子，如果你在你的網頁中有三個段落，第三個有position:relative的樣式。那麼它的新位置將取決於它當前的位置。
<p>Paragraph 1.</p>
<p>Paragraph 2.</p>
<p style="position: relative;left: 2em;">Paragraph 3.</p>
在以上的例子中，設定相對定位的第三個段落距離父容器的左邊為2em，但仍然在兩個段落的下方。它與標準文件流中與其他元素並列。如果你將它的定位屬性調整為position;absolute，那麼任何在它之後的元素都會顯示在它上方，因為這個段落已經不在標準文件流中。（對照上個章節最後的一部分）
假設在示範網頁中我們設定div元素b的為相對定位且相對當前位置的左邊為50畫素：
CSS
#b{position: relative;left:50px;width: 200px;height: 200px;background-color:green;}
效果：
因為相對定位符合標準文件流，所以div元素b之後的元素並沒有顯示在它的上方。
在網頁中的元素常常應用position:relative屬性，而不對它設定任何定位值。意味著這個元素將會確切地出現在它在標準文件流應該出現的位置。
如果獨立地對一個元素設定這個屬性，意味著這個元素是可以作為其他元素絕對定位的環境。例如一個網頁設計中的一個常見的場景，你想將一個div元素作為你網頁的container，那麼這個div元素就可以設定relative 屬性，這樣任何在這個div元素中的元素都可以將它作為定位環境。
固定定位(Fixed)
固定定位更像絕對定位一些。設定固定定位的元素計算位置時和絕對定位模型相仿，但是固定的元素就這麼被固定在瀏覽器視窗上了（像水印一樣），頁面上滾動的所有元素都將經過這個元素。
為了使用這個屬性值，你需要先設定：
position:fixed;
請記住，如果你在你的網站上固定了一個元素，那麼它將始終出現在你重新整理的頁面的那個位置。舉個例子，如果你的元素固定在了你網站的頂部，那麼它將會出現在你每次刷新出的頁面的頂部。
這裡我們新增加一個div元素top並設定顏色為白色(不透明度50%），固定定位在距離頂部0畫素的位置：
CSS
#top{position: fixed;top:0px;width:1000px;height: 100px;background-color:rgba(255,255,255,0.5)}
HTML
<div id="top"></div>
效果：
可以看得到，滾動網頁時，頂部的白條位置不會發生改變（始終跟隨瀏覽器視窗）。
原作者 By Jennifer Kyrnin：https://www.lifewire.com/absolute-vs-relative-3466208
翻譯整理 By RainSilver https://rainsilver.github.io/blog