CSS的position屬性可以讓你設定位置，常用的包含以下四種：
- fixed
- sticky
- relative
- absolute
其中，前兩者普遍用於網頁導覽列、彈跳視窗等功能；
後兩者則可以用在各式各樣的相對位置當中，是個非常實用的排版屬性！
這篇主要帶大家了解relative和absolute屬性，以及相對位置究竟該怎麼進行設定吧！
內容目錄
CSS position 相對位置入門定義
相對位置的概念，我們以最粗糙的舉例來說：
視窗內出現英文字母並呈現：「AB」
我們如果先放上「A」為基準位置，並把「B」設在「A」的右邊，呈現出來就會是「AB」了。
此時的「A」作為基準，因此「A」的CSS設定即為position:relative;
而「B」相對於「A」放置在右邊，因此「B」的CSS設定即為position:absolute;
但事實上CSS實作還包括了內外關係，也就是說通常外層是position:relative; 內層為position:absolute; 內層的內容就會以外層的左上角為基準進行相對於外層的移動。
position relative和absolute實作範例
這裡帶大家實作一個最簡單的範例，讓大家方便理解兩者相對位置關係。
首先，HTML部分放上兩層的div，分別給予class，內容皆留空即可：
<!-- HTML -->
<div class="relative_outside">
<div class="absolute_inside">
<!-- 留空 -->
</div>
</div>接下來，先完成最基本的class設定：
/* CSS */
/* 紅色外層 */
.relative_outside{
position: relative; /* 基準設為relative */
width: 100px;
height: 100px;
background: red; /* 設為紅色 */
}
/* 綠色內層 */
.absolute_inside{
position: absolute; /* 相對者設為absolute */
width: 100px;
height: 100px;
background: green; /* 設為綠色 */
}設完HTML和CSS後，你會了解到幾件事：
- 現在有兩個寬高皆為100的正方形，一個是外層紅色、一個是內層綠色。
- 外層紅色正方形當作基準；
內層綠色正方形為相對於紅色正方形的相對物件。 - 兩者有階層關係，綠色雖然大小相同，但實際上HTML是在內層。
此時設定完會長這樣：
沒錯，目前只看到一個綠色正方形，原因是紅色正方形和綠色正方形的位置相同、大小也相同，因此綠色正方形蓋在紅色正方形上面。
透過absolute新增位置屬性錯開位置
接下來，我們將position:absolute;的綠色正方形，加上top和left的位置屬性，top屬性：垂直與上方的距離；left屬性：水平與左邊的距離。
新增如下：
/* CSS */
/* 綠色內層 */
.absolute_inside{
position: absolute;
width: 100px;
height: 100px;
background: green;
/* 加上下面兩個屬性 */
top: 100px;
left: 100px;
}這時候的意思就是，綠色的正方形會相對於紅色正方形往下推100px以及往右推100px。
完成就會是上圖所示，可以將這個範例的程式碼放到你的程式碼進行測試，並且玩玩看修改top和left屬性，就會更好理解相對位置的功用了。
相對位置以座標來解釋
如果還是覺得有點模糊難以理解，我個人覺得也許比較好的解釋就是用座標來看。
CSS世界中，物件的左上角可以視為XY座標的(0,0)，該物件內容則是從(0,0)開始往右、往下延展出一個物件。
也就是例如紅色正方形，是從左上角(0,0)各延展100px而生成這個正方形的；綠色也是同樣概念延展出正方形。
紅色正方形左上角為(0,0)，綠色正方形設定相對於紅色正方形的位置中，top即為與頂端的距離100px；left為與左側的距離100px。
因此理解後會變成往下及往右各推100px，最後綠色正方形就會推至座標為(100,100)的位置如上圖所示。
總結
以上就是帶大家透過範例及程式碼，快速入門position屬性的應用，最後透過國中數學的座標概念來進一步記憶相對位置的用法，希望無論你是前端還是剛接觸CSS的人，都能快速上手呦！
