我们做帖子经常会遇到在帖子里希望的位置嵌入漂亮的FLASH动画、图片、播放器等等,但是我经常看到有的朋友说帖子预览时位置是好的,可是发帖后位置又偏移了,要反复的修改才准确定位。那么如何真正精确的定位呢?使得帖子预览时FLASH位置或播放器位置于发帖后的位置一样,丝毫不偏移呢?下面我说说关于css里的 position 属性。
position 有三个值,static(静态)、relative(相对)、absolute(绝对);由于static是所有页面元素的默认值,因此设置元素的定位类型时几乎不用这个值,除非用于覆盖之前的定义。 对于后两者,一般应用:在一个相对定位的元素A里面放置一个绝对定位的元素B,那么不管A的位置如何移动变化,B相对于A的位置就总是不会变的,也就是说,不管你的你帖子的位置在欣赏帖子的页面里如何变化(或左对齐、或右对齐、或居中等),帖子里已经定位的FLASH位置或播放器位置就始终不会变的。
下面举例说明:
这是整个帖子的内容。。。 这是整个帖子的内容。。。 这是整个帖子的内容。。。 这是整个帖子的内容。。。
这个是假如嵌入的FLASH 的位置
这个是假如嵌入的另一个Flash 的位置 |
代码:
<table align="center" style="width:500px; height:500px" bordercolor=white border="1" cellspacing="20" cellpadding="8" bgcolor="#999999">
<tbody>
<TR>
<TD align="center" valign="top" style="position:relative">
这是整个帖子的内容。。。<br>
这是整个帖子的内容。。。<br>
这是整个帖子的内容。。。<br>
这是整个帖子的内容。。。<br>
<div style="position:absolute; left:50px;top:200px; width:200px; height:50px; background:#333333; color:#ffffff; padding:5px;"> 这个是假如嵌入的FLASH的位置</div>
<div style="position:absolute; left:200px;top:280px; width:200px; height:50px; background:#333333; color:#ffffff; padding:5px;"> 这个是假如嵌入的另一个Flash</div>
</TD>
</TR>
</tbody>
</table>
上面代码里的:style="position:absolute; left:50px; top:200px; width:200px; height:50px; background:#333333; color:#ffffff; padding:5px;就是你要精确定位的FLASH或播放器的位置的设置,其中 position:absolute;就是相对于整个帖子的绝对位置的意思, left:50px; top:200px;就是要精确定位的FLASH或播放器离开帖子左边线和顶边线的距离 width:200px; height:50px; 就是要精确定位的FLASH或播放器的宽度和高度值。 background:#333333; color:#ffffff; padding:5px;分别是背景颜色、字体颜色、边距,这些只和文字内容有关,与定位无关,一般FLASH或播放器定位不需要用这些,这个位置的设定大家一般都会的,都能理解的。
代码里最关键的是 style="position:relative ,它可以放在TD标签里、也可以放在TR标签里、也可以放在table标签里。本例是放在TD标签里。如果没有这个 style="position:relative 那么你定位好的 FLASH或播放器的位置就不是相对于帖子的绝对位置了,而是相对于整个页面的位置了,就容易偏移或跑动了,就不准确了,这个就和不同的浏览器、不同的页面代码、不同的电脑屏幕分辨率等有关系了,也许你定位是准确的位置,可是别人打开帖子看就可能FLASH或播放器位置偏移了,因为你定位的参考位置不是你的帖子边线。这是问题的关键所在。
如果你不信,你可以做个简单的实验,把上面的代码复制粘帖到帖子里调试预览试试,复制粘贴后不作任何修改,预览看看,FLASH或播放器的位置是在帖子里的某个位置的,然后你删除TD里的style="position:relative" 再预览看看,帖子位置没变,可是FLASH或播放器的位置就变了,看起来是偏移了很多。因为他们失去了帖子边线的参考位置,只能用整个页面做参考了。这个偏移就大了。不同的浏览器,不同的分辨率偏移量都不同,五花八门了。所以,你得记住:当A的position为relative时,B的position为absolute才有效。也就是说你得先设置一个参考位置,然后你定位的元素才会准确,relative、absolute 要结合起来用。