position 的設定值主要有四個：
static 靜態
relative 相對
absolute 絕對
fixed 固定

HTML網頁標準默然所有元件的 position 設定值都是 static 靜態，也就是依照正常的內容由上而下，由左而右排序下來

而且也會依照上一單元的 display 區塊或行內元素方式顯示出來

範例：static 靜態，是所有元件的排列流向

<div> 預設的 display 是 block 區塊、position 是 static

<style type="text/css">
.square1{
    border: 1px solid #333;
    width: 100px;
    height: 100px;
}
</style>
<div class="square1" style="background-color: red;">1</div>
<div class="square1" style="background-color: yellow;">2</div>
<div class="square1" style="background-color: lime;">3</div>

效果展示：

使用其它設定值：
relative 相對
absolute 絕對
fixed 固定
那麼就可以進行位置定位

定位設定有 top 上 / bottom 下 / left 左 / right 右 四個邊界距離設定屬性

relative 設定值，仍然是依照正常元件位置流向排列，但是你可以設定上下左右位置定位

範例：

給黃色方形一個id名稱 id="s2"

並且設定：
position: relative;
top: 50px;
left: 100px;

<style type="text/css">
.square2{
    border: 1px solid #333;
    width: 100px;
    height: 100px;
}
#s2{
    position: relative;     /* 設定成相對位置 */
    top: 50px;              /* 與上方距離 */
    left: 100px;            /* 與左方距離 */
}
</style>
<div class="square2" style="background-color: red;">1</div>
<div class="square2" style="background-color: yellow;" id="s2">2</div>
<div class="square2" style="background-color: lime;">3</div>

效果展示：

absolute 設定值，是相對於上一層(父)元件的位置，父元件至少要設定為 relative

範例：

設定一個大的長方形 id="box"，裡面有二個正方形

設定一個大的長方形 id="box"，至少要設定為 position: relative;

<style type="text/css">
.square3{
    border: 1px solid #333;
    width: 100px;
    height: 100px;
}
#box{
    position: relative;
    border: 1px solid #333;
    width: 600px;
    height: 300px;
}
#a31{
    position: absolute;
    top: 30px;
    left:30px;
}
#a32{
    position: absolute;
    right: 30px;
    bottom: 30px;
}
</style>
<div id="box">
    <div class="square3" style="background-color: yellow;" id="a31">2</div>
    <div class="square3" style="background-color: lime;" id="a32">3</div>
</div>

效果展示：

fixed 設定值，固定位置，是相對於瀏覽器視窗的位置

所以標籤寫在哪裡都可以，基本上是寫在最後面

範例：在畫面上固定一個圖片

<style type="text/css">
#box2{
    position: fixed;
    top: 100px;
    right: 100px;
    border: 10px solid lightgreen;
    border-radius: 50%;             /* 圓形 */
    overflow: hidden;               /* 溢出：超出邊框則隱藏 */
    z-index: 100;                   /* 堆疊值，設定為100 */
}
</style>
<div id="box2">
    <img src="images/logo.png">
</div>

效果展示：

畫面右邊的圖片