【HTML、CSS教學】7.Position

🚩 Position定位

Position屬性的用法有四種：

1. position: static;
   預設值
2. position: fixed;
   固定定位
3. position: absolute;
   絕對定位
4. position: relative;
   相對定位

🚩 CodePen範例

CodePen連結

chatRoom使用了固定位置在畫面底部：bottom: 0
畫面從右邊往左算起的24%：right:24%
所以儘管畫面在上下滾動，但它依舊會固定指定的位置上。

.chatRoom {
　position: fixed;
　bottom: 0;
　right: 24%;
}

若是將chatRoom的position設定成static：position: static
它就會變回預設值，像是一般的div接續在footer後面。

.chatRoom {
　position: static;
}

絕對定位所指定的位置，會依照外層父元素的相對定位的範圍而定。
例如在goods設定relative： position: relative
goods裡面的子元素promotion將position設定absolute： position: absolute
定位的依據就會依照父元素goods的範圍而定。

.goods {
　position: relative;
}
.goods .promotion {
　position: absolute;
　right: 0;
　top: 10%;
}