CSS 定位設定

position性質

這個性質是設定元件的擺放方式，我們可依據需要來設定適當的值。可用的屬性值有︰absolute（絕對定位）、relative（相對定位）、static（靜態定位）。 所謂position:absolute就是指元件定位法是以父元件（通常就是此網頁）的絕對座標來定位（原點為父元件左上角）。而position: relative是指讓此元件以一般網頁排列方式決定位置後，再以此點為相對座標定位。至於position:static是如同舊式瀏覽器般，以一般網 頁排列方式決定位置，並且不能再加以定位。這個屬性設定將會影響座標系統的原點。absolute原點為父元件左上角、relative原點為應有之自然 位置、static不可用座標系統。通常用了這個屬性後，要配合top、left屬性來決定元件位置。

top性質

經由position性質設定後，會決定出一個座標系統，再由top性質來決定此元件有要擺放的垂直位置。屬性值為一測量長度，可用如in、cm、mm、pt、pc、em、en、ex、px等單位，但建議各位用px這個單位（因為螢幕一格就是1px）。如top=20px，則會依座標系統將此元件擺放在原點下方+20px的位置（當然，position:relative與position:absolute所得的結果會不同）。注意，可以指定負值！

left性質

這個性質決定元件的水平位置，當然座標系統還是依position之設定而變。例如left:30px，則將此元件擺放到座標原點左方+30px的地方。

綜合應用

[HTML]
[HEAD]
　[STYLE]
　 　SPAN {position:absolute;font-size:50px;font-family:Arial;font-weight:700}
　 　SPAN.small {font-size:40px;color:red}
　[/STYLE]
[/HEAD]
[BODY]
　[SPAN STYLE="top:5px;left:5px;color:gray"]SCJH[/SPAN]
　[SPAN STYLE="top:0px;left:0px;color:blue"]SCJH[/SPAN]
　[SPAN CLASS=small STYLE="top:24px;left:100px"]CSS[/SPAN]
[/BODY]
[/HTML]