檢視關於 position 屬性的原始碼

'''靜態 static'''
<div style='position:relative;border:solid #6AC5AC 3px;'>
<span style='position:absolute;background-color:#6AC5AC;color:#414142;top:0;left:0;'>&lt;div style='position:static;'&gt;</span>
  <p style='padding:1em;'>
     <code>static</code> 是預設值。任何套用 <code>position:static;</code> 的元素「不會被特別定位」在頁面上特定位置，而是照著瀏覽器預設的配置自動排版在頁面上，所有其他的屬性值都代表該元素會被定位在頁面上。
  </p>
<span style='position:absolute;background-color:#6AC5AC;color:#414142;right:0;bottom:0;'>&lt;/div&gt;</span>
</div>

'''相對 relative'''
<div style='position:relative;border:solid #6AC5AC 3px;'>
<span style='position:absolute;background-color:#6AC5AC;color:#414142;top:0;left:0;'>&lt;div style='position:relative;'&gt;</span>
  <p style='padding:1em;'>
     <code>relative</code> 表現的和 <code>static</code> 一樣，除非你增加了一些額外的屬性。
  </p>
<span style='position:absolute;background-color:#6AC5AC;color:#414142;right:0;bottom:0;'>&lt;/div&gt;</span>
</div>

<div style='position:relative;width:600px;top:-20px;left:20px;border:solid #D64078 3px;'>
<span style='position:absolute;background-color:#D64078;color:#414142;top:0;left:0;'>&lt;div style='position:relative;width:600px;top:-20px;left:20px;'&gt;</span>
  <p style='padding:1em;'>
    在一個設定為 <code>position: relative</code> 的元素內設定 <code>top</code> 、 <code>right</code> 、 <code>bottom</code> 和 <code>left</code> 屬性，會使其元素「相對地」調整其原本該出現的所在位置，而不管這些「相對定位」過的元素如何在頁面上移動位置或增加了多少空間，都不會影響到原本其他元素所在的位置。
  </p>
<span style='position:absolute;background-color:#D64078;color:#414142;right:0;bottom:0;'>&lt;/div&gt;</span>
</div>

'''fixed 固定於瀏覽器座標'''

請看右下角的示範
<div style='position:fixed;bottom:0;right:0;width:500px;z-index:9999;border:solid #FDC72F 3px;background-color:white;'>
<span style='position:absolute;background-color:#FDC72F;color:#414142;top:0;left:0;'>&lt;div style='position:fixed;bottom:0;right:0;width:500px;z-index:9999;'&gt;</span>
  <p style='padding:1em;'>
    固定於瀏覽器的右下角。
  </p>
<span style='position:absolute;background-color:#FDC72F;color:#414142;right:0;bottom:0;'>&lt;/div&gt;</span>
</div>