定位設定
上一篇 /
下一篇 2007-05-13 12:23:49
/ 个人分类：强帖收藏
定位設定
position性質
{ B)aU7mV S0這個性質是設定元件的擺放方式，我們可依據需要來設定適當的值。可用的屬性值有︰absolute（絕對定位）、relative（相對定位）、static（靜態定位）。所謂position:absolute就是指元件定位法是以父元件（通常就是此網頁）的絕對座標來定位（原點為父元件左上角）。而position:relative是指讓此元件以一般網頁排列方式決定位置後，再以此點為相對座標定位。至於position:static是如同舊式瀏覽器般，以一般網頁排列方式決定位置，並且不能再加以定位。這個屬性設定將會影響座標系統的原點。absolute原點為父元件左上角、relative原點為應有之自然位置、static不可用座標系統。通常用了這個屬性後，要配合top、left屬性來決定元件位置。
u}4qa,^tXKT0
top性質
w[zo I Cd0經由position性質設定後，會決定出一個座標系統，再由top性質來決定此元件有要擺放的垂直位置。屬性值為一測量長度，可用如in、cm、mm、pt、pc、em、en、ex、px等單位，但建議各位用px這個單位（因為螢幕一格就是1px）。如top=20px，則會依座標系統將此元件擺放在原點下方+20px的位置（當然，position:relative與position:absolute所得的結果會不同）。注意，可以指定負值！
$p@&P s z-M1o%d0
left性質
1UR7^M;c I4u K g S#f0這個性質決定元件的水平位置，當然座標系統還是依position之設定而變。例如left:30px，則將此元件擺放到座標原點左方+30px的地方。 SupeSite/X-Space官方站k#X Y#Ga y[ H
SupeSite/X-Space官方站(kC$BP0p8o"{%n/?綜合應用SupeSite/X-Space官方站 zQ b*MR
SupeSite/X-Space官方站mQF M8S9~<HTML>
+f6?(l\$[T-K*u |l ^0<HEAD>SupeSite/X-Space官方站 u pI1`,}{
<STYLE>SupeSite/X-Space官方站t~!RVz.J'M+~
SPAN {position:absolute;font-size:50px;font-family:Arial;font-weight:700}SupeSite/X-Space官方站AL2n*`1u+y?/j
SPAN.small {font-size:40px;color:red}SupeSite/X-Space官方站\.f3VB+W$c,GzX7J
</STYLE>
#z8}7vj
N G%E0</HEAD>SupeSite/X-Space官方站+TV#P*TR\3T y gj B
<BODY>
vs8\^U.j| c? z0 <SPAN STYLE="top:5px;left:5px;color:gray">SCJH</SPAN>SupeSite/X-Space官方站 LI!y,{h6T y_ c
<SPAN STYLE="top:0px;left:0px;color:blue">SCJH</SPAN>
@ GT {_E0 <SPAN CLASS=small STYLE="top:24px;left:100px">CSS</SPAN>
(lX!k-KrI%L4uLz0</BODY>
q)v%[B a0k!S:k8M0</HTML>SupeSite/X-Space官方站}'t3|+[B%V
导入论坛
收藏
分享给好友
管理
举报
TAG:
