以基本結構來說
CSS會將每個HTML的標籤看作是個別獨立的框
標籤會有兩種區塊
第一種是區塊層級元素
例如<div> <p> <ul> <li>
另一種則是行內元素
例如像是<img> <i> <b>

若一個區塊層級元素內還有另一個區塊層級元素
則外面的那個被稱為容器元素或是父元素

例如:

<div>
  <p>
  內容
  </p>
<div>  

此時<div>就是<p>的父元素

CSS有以下幾種定位方式可以控制版面配置

正常流向
position: static
此為預設值
通常不太需要特別指定此屬性
這個屬性會使標籤以正常方向排列

相對定位
position: relative
這個屬性加上偏移值(top、bottom、left、right)即可調整標籤的移動位置
移動的位置是相對於原本正常流向的位置

絕對定位
position: absolute
這個屬性加上偏移值(top、bottom、left、right)即可調整標籤的移動位置
移動的位置是根據父元素的原點
若用x軸與y軸來說明
可以說是相對於原點(x:0,y:0)往第四象限推移
若父元素定位方式為正常流向
則會以body標籤作為原始位置

固定定位
position:fixed
此屬性也是一種絕對定位
他會將標籤放在瀏覽器視窗的相對位置上
也就是說不論上下捲動網頁
使用了此屬性都會固定在同一位置顯示