CSS position 屬性
static
預設值，照著瀏覽器的預設配值自動排版在頁面上。
relative
如果沒有增加額外的屬性，表現會跟 static 一模一樣。
使用 top、right、bottom、left 屬性，會使元素調整原本的相對位置，
若因為屬性去影響了位置或空間，都不會影響到原本其他元素所在的位置。
<style>
.sample1 {
border: 2px solid blue;
padding: 30px;
position: relative;
}
.sample2 {
padding: 30px;
border: 2px solid green;
position: relative;
top: -20px;
left: 15px;
}
</style>
<div class="sample1">relative</div>
<div class="sample2">relative + top: -20px; + left: 15px;</div>
fixed
會相對於瀏覽器視窗來定位，即便是頁面捲動它還是會固定在相同的位置。
不會跟其他元素的配置互相干擾，經常用於導覽列固定在上方。
absolute
絕對定位是許多人最為迷失的部分，簡單來說它是被定義在上層容器的相對位置下。
若上層容器沒有可以被定位的元素，那它就會相對於所有內容 ( 即 <body> 元素 )。
除了套用 position: static 以外的屬性值的元素都算被定義為可以定位的元素。
<style>
.sample1 {
padding: 30px;
border: 2px solid blue;
}
.sample2 {
padding: 30px;
border: 2px solid green;
position: relative;
}
.e-absolute {
border: 1px solid red;
position: absolute;
top: 10px;
left: 0;
}
</style>
<div class="sample1">
This is sample-1 (without position: relative;)
<div class="e-absolute">
hello this is example for absolute <div>
</div>
</div>
<div class="sample2">
This is sample-2.
<div class="e-absolute">
hello this is example for absolute <div>
</div>
</div>