定位設定
上一篇 /
下一篇 2007-05-13 12:23:49
/ 个人分类：强帖收藏
定位設定
position性質
wT+?6H bg(HT Q0這個性質是設定元件的擺放方式，我們可依據需要來設定適當的值。可用的屬性值有︰absolute（絕對定位）、relative（相對定位）、static（靜態定位）。所謂position:absolute就是指元件定位法是以父元件（通常就是此網頁）的絕對座標來定位（原點為父元件左上角）。而position:relative是指讓此元件以一般網頁排列方式決定位置後，再以此點為相對座標定位。至於position:static是如同舊式瀏覽器般，以一般網頁排列方式決定位置，並且不能再加以定位。這個屬性設定將會影響座標系統的原點。absolute原點為父元件左上角、relative原點為應有之自然位置、static不可用座標系統。通常用了這個屬性後，要配合top、left屬性來決定元件位置。 SupeSite/X-Space官方站W3Y n,@"T8M8Q e
top性質
SupeSite/X-Space官方站 h0MvHGU經由position性質設定後，會決定出一個座標系統，再由top性質來決定此元件有要擺放的垂直位置。屬性值為一測量長度，可用如in、cm、mm、pt、pc、em、en、ex、px等單位，但建議各位用px這個單位（因為螢幕一格就是1px）。如top=20px，則會依座標系統將此元件擺放在原點下方+20px的位置（當然，position:relative與position:absolute所得的結果會不同）。注意，可以指定負值！
{-CK;p9z0
left性質
2BXM#W;I\#i,D0這個性質決定元件的水平位置，當然座標系統還是依position之設定而變。例如left:30px，則將此元件擺放到座標原點左方+30px的地方。 SupeSite/X-Space官方站"q{jM b0] {)[(^
k1o)Y"r2b7ng(]4w PR0綜合應用
4y9Y X$fs5gn0
SupeSite/X-Space官方站&|BCM
`j e8b!W ^<HTML>SupeSite/X-Space官方站~YHd1Q${&}
<HEAD>
+q9Z@'U%bvb j0 <STYLE>SupeSite/X-Space官方站sD'fdw3a6UL
SPAN {position:absolute;font-size:50px;font-family:Arial;font-weight:700}
F+I_U5]4V m,mj"}8u1v0 SPAN.small {font-size:40px;color:red}SupeSite/X-Space官方站\F5It;H
</STYLE>SupeSite/X-Space官方站3Va[GiD8L
</HEAD>SupeSite/X-Space官方站 `
c G|"o#o{
<BODY>
4y c J6l7oP0 <SPAN STYLE="top:5px;left:5px;color:gray">SCJH</SPAN>SupeSite/X-Space官方站,d;K,S#A'm
E2wS
<SPAN STYLE="top:0px;left:0px;color:blue">SCJH</SPAN>
[4~%lG|AU0 <SPAN CLASS=small STYLE="top:24px;left:100px">CSS</SPAN>SupeSite/X-Space官方站Z$Sl(K W
</BODY>SupeSite/X-Space官方站.N9E(K+`+P
</HTML>SupeSite/X-Space官方站#l[ B%{ A0l m,V+x cn B:O
导入论坛
收藏
分享给好友
管理
举报
TAG:
