在排版方面還有一個很重要的屬性，其實前面的範例多少能見到它的身影，今天我們就來深入的認識它吧！<position>是一個用於定位元素的屬性，在CSS中絕對是不可缺少的一部分，它分為幾種不同的類型：
<static>
<static>是一個預設值，沒有以任何特殊方式定位的元素，會照著瀏覽器預設的配置自動排版在頁面上，如果 position 的值是被設定為<statics>的話，那 top、bottom、left、 right 的值就都沒有意義了喔！
.div {
position: static;
}
<relative>
<relative>是相對於原本的位置再進行定位，元素內設定位置屬性 top 、 right 、 bottom 、 left ，會使其元素「相對地」調整位置，這個調整不會影醒到其他元素的位置。
.div {
position: relative;
left: 20px;
top: 20px;
}
<fixed>
<fixed>會相對於瀏覽器視窗來定位，所以網站捲動時元素不會跟著移動，<fixed>元素不會保留它原本在頁面應有的空間，不會跟其他元素的配置互相干擾，常見的就是導覽列的部分可以用<fixed>來做定位，這樣網站往下滑的時候還是可以看到最上排的導覽列喔！
.div {
position: fixed;
bottom: 0;
right: 0;
}
<absolute>
<absolute>的定位方式是往上層容器去找定位，再依據上層容器去移動到相對位置，<absolute> 元素對其它元素的佈局沒有影響，可以將元素放在版面的任何地方，要注意的是如果沒有可以被定位的上層容器的話（<position:static>不算是可以被定位的元素喔！），就會找到<body>去做定位，並隨著頁面滾動而移動。
.div { /＊添加可定位元素＊/
position: relative;
width: 600px;
height: 600px;
}
.div2 {
position: absolute;/＊往上層找＊/
top: 0;
right: 0;
width: 100px;
height: 100px;
}
<sticky>
<sticky>屬性是相對定位和固定定位的混合體，元素開始先視為相對定位，直到它超過指定的值，就會被視為固定定位。
.div {
position: -webkit-sticky; /* Safari瀏覽器 */
position: sticky;
top: 0;/＊指定值＊/
}
<position>屬性雖然有些複雜，但它是做出一個良好的版面配置的必備的知識喔，大家可以多練習看看！
iThome鐵人賽
看影片追技術