簡介
CSS（層疊樣式表）中的position屬性一直是控制元素定位的核心工具，對于構建響應式設計和復雜布局至關重要。 positon屬性并不復雜，但想要正確使用卻并不容易。這篇文章將帶領你全方位深入理解position，希望能幫助你徹底解決這個讓人頭痛的問題。
官方文檔中這么定義position屬性：SS position 屬性用于指定一個元素在文檔中的定位方式。top，right，bottom和left屬性則決定了該元素的最終位置。
其實說白了就一句話：能夠靈活的改變盒子在網頁中的位置
四個定位類型和五個取值
position只有四個定位類型和五個取值，下面讓我們來一一介紹。
四個定位類型
定位元素（positioned element）是其位置屬性為 relative, absolute, fixed 或 sticky 的一個元素（換句話說，除static以外的任何東西）。
相對定位元素（relatively positioned element）是位置屬性為 relative的元素。
絕對定位元素（absolutely positioned element）是位置屬性為 absolute 或 fixed 的元素。
粘性定位元素（stickily positioned element）是位置屬性為 sticky 的元素。
五個取值
static：是CSS 屬性的默認值。屬性為static的元素將按照標準的文檔流進行布局，不受top,right,bottom,left,z-index等屬性的影響，其他元素會根據 static 定位元素的位置進行布局，不會因為 static 定位元素的移動而受到影響。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#box1 {
margin: 20px;
width: 200px;
height: 200px;
padding: 5px;
border: 1px solid red;
background-color: green;
}
#box2 {
margin: 10px;
width: 300px;
height: 300px;
background-color: yellow;
}
#box3 {
width: 50px;
height: 50px;
background-color: pink;
}
</style>
</head>
<body>
<!--
box1 在box2上面，正常的文檔流
html 文檔流 和 css 結合 樣式生效 盒模型
-->
<div id="box1">
</div>
<div id="box2">
<div id="box3">box3</div>
</div>
</body>
</html>
static：正常文檔流，沒有什么特別的變化
relative：相對定位。相對于原位置移動 ，盒子原來的占位（文檔流中的位置） 不受影響。顯示模式特點保持不變（塊級元素，行內元素，行內塊元素等），
現在我們為box1盒子添加相對定位
#box1 {
position: relative;
/* 相對自身 */
top: 30px;
left: 30px;
}
到box1發生了一點小小的變化，它通過top和left相對于原來的位置離開了，但之前的位置并沒有被box2占用掉。
absolute：絕對定位。不占用原位置。顯示模式具備行內塊特點。設置邊偏移則相對最近的已經定位的祖先元素改變位置。如果祖先元素都未定位，則相對瀏覽器可視區改變位置，為box3添加絕對定位。
#box3 {
position: absolute;
/* 絕對定位 相對于父元素 */
top: 10px;
left: 10px;
}
這里可能跟預想的不太一樣了，出現了特殊情況。就如上面說到的，設置absolute值之后，相對最近的已經定位的祖先元素改變位置。如果祖先元素都未定位，則相對瀏覽器可視區改變位置。目前我們并沒有給box2添加position定位屬性，所以box3將相對于瀏覽器可視區來改變自身的位置。
那我們現在為box2添加一個position:relative
#box2 {
position: relative;
}
這回box3終于相對于box2定位了，這也引出了我們常用的一種定位方法：子絕父相
在使用相對定位時，常常把子元素設置為position: absolute，把父元素設置為position: relative,來保證能夠實現我們想要的結果。
fixed：固定定位。是一種特殊的絕對定位。元素會被移出正常文檔流，并不為元素預留空間，而是通過指定元素相對于屏幕視口（viewport）的位置來指定元素位置。也就是說，元素的位置在網頁滾動時不會改變。就好比一些網頁上左右兩邊的浮窗，顯示模式具備行內塊特點。相對于瀏覽器窗口進行定位。
我們把box3的absolute改為fixed
#box3 {
position: fixed;
}
再為你的html添加一些增高的東西，使它能夠上下滑動，你就會發現無論你怎么滑動頁面，box3永遠會出現在你的瀏覽器的左上角。
sticky：粘性定位。它結合了 position: relative 和 position: fixed 的特點。粘性定位可以被認為是相對定位和固定定位的混合。元素在跨越特定閾值前為相對定位，之后為固定定位。
還是box3，我們將他的position改為sticky
#box3 {
position: sticky;
}
這回我們看到在滑動到box3之前，它一直是相對定位。當我們滑動到box3的頂部與瀏覽器頂部重合時，他開始變成固定定位，跟隨窗口一直出現在瀏覽器的左上角。但是，當我們滑動頁面直到box2看不到的時候，box3也會跟著消失。因為box3是box2的子元素，活動范圍只在box2中，它不能夠脫離box2的掌控。
總結
我們深入探討了CSS position屬性的各種模式——從靜態定位到絕對定位、相對定位、固定定位以及粘性定位，每種模式都有其獨特的應用場景和優勢。掌握了這些知識，你將能夠更加靈活地控制網頁中各個元素的位置，創造出既美觀又功能性強的網頁布局。
