|
【學(xué)習(xí)精確定位代碼】
在做帖時(shí),我們常常為不能把內(nèi)容準(zhǔn)確地放到指定位置上而發(fā)愁. 其實(shí)用CSS定位代碼很容易解決這個(gè)問題的. 而且它可以精確到一絲一毫.
先看代碼:
style="position: relative; top: 80px; left: 90px;"
說明:
style 樣式(或風(fēng)格)
position 定位屬性, 他的值有: relative 相對定位. absolute 絕對定位. static 靜態(tài)定位.
top 位置屬性,離上邊的距離,值可絕對(如80px)或相對(如60%),他可以是負(fù)數(shù).
left 位置屬性,離左邊的距離,值可絕對(如80px)或相對(如60%),他可以是負(fù)數(shù).
這里只要理解相對定位和絕對定位的含義就可以了, (靜態(tài)定位和相對定位有點(diǎn)相似). 顧名思義, 相對和絕對只是參照物的不同而已.
相對定位: 相對于所在容器的定位, 表格,論壇樓面,空間等等都是容器. 絕對定位:整個(gè)論壇葉面或整個(gè)空間的左上角為起始點(diǎn).只有將它放在相對定位里時(shí),它才會以相對定位為參照物. 起始點(diǎn)就是坐標(biāo)為0,0的點(diǎn),位置屬性top和left就是以他為起點(diǎn),規(guī)定向下或向右移動多少.如果是負(fù)數(shù)就是向上和向左移動多少. 那么到底怎么用呢,很簡單的,將上面的相對定位代碼放到你要定位的標(biāo)簽里就可.
如: <img src="圖片地址" style="position: relative; top: 80px; left: 90px;" ......>
如: <table style="position: relative; top: 80px; left: 90px;" ......>
如: <embed style="position: relative; top: 80px; left: 90px;" ......>
如: <marquee style="position: relative; top: 80px; left: 90px;" ......> 等等,
然后調(diào)節(jié)位置屬性top和left到你最滿意的位置. 這個(gè)定位代碼有個(gè)很重要的特點(diǎn),就是用它定位的內(nèi)容,后面的永遠(yuǎn)覆蓋前面的.
所以代碼前后位置要準(zhǔn)確. 就算只用一個(gè)也要給它留好位置,除非是故意要覆蓋. 如果已有style=""怎么辦,將代碼position: relative; top: 80px; left: 90px;也放進(jìn)去就可. 注意寫法:屬性和值之間用冒號":",屬性和屬性之間用分號";",所有互相之間空格不講究. 如果代碼沒地方放或無效怎么辦,有個(gè)懶辦法:
<div style="position: relative; top: 80px; left: 90px;">要定位的內(nèi)容</div>
不要忘了收尾,很重要的 ! 好了,就這么簡單,當(dāng)你遇到定位困難時(shí),就拿它去試試. 如還有問題,我們再一起討論.
我用的最多的寫法:
<DIV style="position:relative; top:80px; left:90px; width:360px; height:280px; overflow: hidden">
<div style="position: absolute; top: 130px; left: 50px">
第一層內(nèi)容 </div>
<div style="position: absolute; top: 30px; left: 20px">
第二層內(nèi)容 </div>
<div style="position: absolute; top: 66px; left: -50px">
第三層內(nèi)容 </div>
............
</DIV>
說明:
第一個(gè)<DIV ......>是相對定位代碼,它主要作用是定可顯示的范圍(由規(guī)定的寬和高組成的容器),如這里定為 width:360px; height:280px;.當(dāng)然,位置屬性top和left可以調(diào)節(jié)這個(gè)容器在樓面的位置.(或放到其它容器里位置)
下面幾個(gè)<div ......>是絕對定位代碼,每個(gè)都覆蓋前一個(gè),起到層的作用.所有的層絕對跑不到這個(gè)容器的外面,也就是說隨便怎樣調(diào)節(jié)位置屬性top和left,都只能在這個(gè)<DIV ....>規(guī)定的范圍內(nèi)顯示.當(dāng)然調(diào)到外面就看不見了.
要注意不要忘記寫收尾.不寫后果是很嚴(yán)重的. 代碼的大小寫其實(shí)效果是一樣的,上面這樣寫法是為了以后尋找和修改的方便.
在居中頁面中使用層，最大的問題就是層的定位問題，當(dāng)改變顯示器分辨率后，層相對其它居中元素就會改變位置。本文介紹層相對其它居中元素不會錯位的方法。
層的絕對定位和相對定位
層的絕對定位代碼：
<div id="Layer1" style="position:absolute; left:45px; top:25px; width:400px; height:155px; z-index:1"></div>
層的相對定位代碼：
<div id="Layer1" style="position: relative; left:45px; top:25px; width:400px; height:155px; z-index:1"></div>
說明:
在居中頁面中，插入相對定位層代碼，層的位置在頁面居中。但是它變得不可移動，使用不夠方便。
插入絕對定位代碼，當(dāng)left和top含有正負(fù)數(shù)值，層就無法居中。當(dāng)清除left和top屬性后，層可以居中，相對頁面其它居中元素沒有錯位現(xiàn)象。
|
