|
做一个音画作品，如果只是在一张背景图上布置若干个透明Flash，那么最简单的方法就是用一个table标签，将背景图作为table的背景(background)，透明Flash放置在td标签内，可以只用相对定位不用绝对定位层，习之过去的博客有这样的例子。效果如下，代码请参阅：“透明FLASH的使用方法（一）相对定位”
说明：下面的效果只能在版本为IE7以下的浏览器才能看到。如果您是IE8，请用IE8为与低版本兼容而附加的“兼容性按钮”，也可以在浏览器菜单栏的工具里设置兼容性。否则看到的Flash是一张张平铺的，没有叠加的效果。
用“相对定位”做的音画
需IE7或以下的浏览器里看
它的代码虽然简单，但有局限。一》作为背景图（如上面的蓝天白云图），上传时多大就显示多大，不能调节大小。二》在背景图上，除了Flash，将不能再写文字或再贴一张小图。因此，制作音画图常常会用到源代码里的“绝对定位”。
所谓“定位”就是在页面上显示的内容，根据设置的坐标值（left 和 top）来决定它在页面上的位置。既然是“坐标”，就有个“坐标原点”。相对定位的原点就在“当地”（根据上下文它应该在的位置）。而绝对定位，如果事先不规划“原点”的位置，那么它在网页的左上角。我们老小孩的博客或论坛，是镶嵌在网页中的，上下、左右都是网站规划好的内容，包括原点也是网站规划好的。它的位置请参看我的博客：“透明FLASH的使用方法（二）绝对定位”。 在本文最上面标题行的左面有一个红色的小方块，这就是老小孩网站给博客规划好的“原点”。
我们的博客有个博主的头像，打开博客时头像展开，过一会儿头像收起，我们的博文也会随着上升。请注意，博客文章的上下发生了变化，而本文显示的红色小方块是固定不变的。也就是说，作为“绝对定位”的原点也是不动的。假如博客是一幅音画，上面布置的透明Flash是用绝对定位的，那么原点不动，透明flash相对于原点也不动，而背景图随着头像的收起上升了，也就是说透明flash的位置相对音画下降了。
在论坛，网站也规划好了“原点”，也在类似的位置。论坛有“主帖”、“跟帖”、“楼层”，如果自己不重新规划“原点”而直接用了绝对定位，那么在不同的楼层应该采用不同的坐标值（left和top的值）。否则，在主帖里位置正常的flash拷贝到“底楼”，这个Flash会仍然会留在上面，相对于音画帖子说，它飘走了。
想个法子将背景图和透明Flash捆绑在一起，无论搬到何处，它们相互的位置始终保持不变。这就要将“原点”设置在背景图的内部，并与背景图绑定。方法很简单，设置一个新的定位层（最常用的是建一个相对定位层），将这些要捆绑在一起的内容统统置放在新的定位层里面，这个新设置的定位层就为里面的“绝对定位”提供了一个新的“原点”。
在音画帖里，凡是Flash的位置用了绝对定位（position:absolute），而没有规划它们的“原点”，不妨在它们（背景图和全部Flash）的外部再加个“箍”，将它们绑定。方法：进入到“编辑”--“源码”：
1》在需要绑定的对象前加下述代码，
<div style="position:relative; left:0px; top:0px;">
2》再在需要绑定的对象后加上div的封闭标签（如下）：
</div>
3》设置好了这个定位层，需要将内部Flash的绝对定位坐标值left和top的数据做相应的修改。但这是一次性的，改定以后，无论搬到何处，Flash都不会飘走了。
请参看我的上一篇博客：秋叶飘飘效果的源代码，在最外层也用了一个相对定位层，目的是框住飘飘的枫叶，使它不飘到外面去。
在源代码里“层”是由div标签设置的，div的起始标签和/div结束标签就像捆绑的绳子，将这两个标签内部的内容，全部捆绑在一起。上面代码里设置div，是一个相对定位层（position:relative），left 和top均设置成0 ，原点就位于层的左上角。例如，里面有一张背景图片，那么原点的位置与图片的左上角重叠。这样所有在里面的采用绝对定位的Flash，原点也就全部统一了。
在上面的代码里，没有设置宽和高，也就是没有限定层的范围。如果设置了宽和高，通常要同时设置当内容超出了这个范围时的处理方法（即overflow属性）如果不设置，默认是内容可见，如果设置成auto，就像老小孩的博客区域，当里面的内容超出后会自动加上滚动条。
div标签在源代码里称为“块级元素”，它能产生一个“块级容器”，等待我们去规划这个容器，以放置各种内容，如文本、图像、Flash等等。
使用div标签下面几点十分重要：
一：它的“封闭标签”不能省。在一篇代码里，有一个div的起始标签必须要有/div结束标签相对应，这两个标签之间是容器里的内容。因为div标签可以嵌套，结束标签样子又都是相同的，因此写代码，一定要知道它们的配对情况，不能落单。
二：div标签的属性几乎都要在style里设置，包括宽度、高度、对齐等属性。这与table标签不一样，刚开始用时经常会出错。
例如，在div里这样设置宽度和背景色是无效的：width="100px" bgcolor="#ffcccc"
应该如此设置：style="width:100px; background-color:#ffcccc"
等等。所有在style里的设置可以写在一对引号内，中间用英文半角的分号“;”分开。
三：按HTML源代码的规则，各个Flash按代码出现的先后顺序显示，如果Flash有重叠，代码先出现的在下面，后出现的覆盖在上面。如果要改变顺序，需要在style里加“层号”设置：Z-index: XX XX代表不为0的整数（可以是负数，表示在背景图的下面）
--待续--
| 
