三衢客栈 www.sqkz.com-如何进行FLASH、播放器、图片等的精确定位

　　我们做帖子经常会遇到在帖子里希望的位置嵌入漂亮的FLASH动画、图片、播放器等等，但是我经常看到有的会员说帖子预览时位置是好的，可是发帖后位置又偏移了，要反复的修改才准确定位。那么如何真正精确的定位呢？使得帖子预览时FLASH位置或播放器位置于发帖后的位置一样，丝毫不偏移呢？下面我说说关于css里的 position 属性。
　　position 有三个值，static（静态）、relative（相对）、absolute（绝对）；由于static是所有页面元素的默认值，因此设置元素的定位类型时几乎不用这个值，除非用于覆盖之前的定义。对于后两者，一般应用：
在一个相对定位的元素A里面放置一个绝对定位的元素B，那么不管A的位置如何移动变化，B相对于A的位置就总是不会变的，也就是说，不管你的你帖子的位置在欣赏帖子的页面里如何变化（或左对齐、或右对齐、或居中等），帖子里已经定位的FLASH位置或播放器位置就始终不会变的（我不知道这样说能不能说明白）。下面举例说明：

这是整个帖子的内容。。。
这是整个帖子的内容。。。
这是整个帖子的内容。。。
这是整个帖子的内容。。。

这个是假如嵌入的FLASH
的位置

这个是假如嵌入的播放器
的位置

上面效果的代码：

[运行下面代码]（注：含有JS脚本的代码请慎重运行） [拷贝下面代码]

<table align="center" width="500" height="600" border="1" cellspacing="20" cellpadding="8" bgcolor="#999999"><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;"> <br>这个是假如嵌入的FLASH<br>的位置</div><div style="position:absolute; left:200px;top:280px; width:200px; height:50px;background:#333333; color:#ffffff; padding:5px;"> <br>这个是假如嵌入的播放器<br>的位置</div></TD></TR></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 要结合起来用。

以上仅做参考，希望对你做贴有所帮助，如有不对，欢迎批评指正，谢谢！
　　　　　　　　　　　　　　　　　　　　　　　爿登　2007.07.02

[作者于2007-8-26 1:37:00修改]