<table border="5" cellspacing="0" cellpadding="0" style="position: absolute;
left: 150px; top: 245px; width: 200; height: 60" bgcolor="#FFFF00" bordercolor="#FF0000">
<tr> <td> <p align="center"><b><font size="7">Ａ</font></b></p> </td> </tr> </table>
对象定位讨论
为方便叙述，先设置几个对象。
１、为简单明了起见，仅画一个表框，设置边框，设置背景色。表示为“Ａ”。 ２、一个蓝边框表格对象，作为容器（比喻为一口箱体），表示为“Ｂ”。
关于定位的几个基本概念。 １、平常，编辑文字内容，其中或夹有图片等其他对象，当没给它们设置定位时，它们都在同一平面、同一区域“顺序排列”，并且不能重迭，并自动换行。某行的高度，是以该行最高的对象为准。 ２、定位对象，必须有一个参照对象。 ３、相对定位对象（position: relative），它的参照定位点为“它自己的零点”。 ４、绝对定位对象（position: absolute），它的参照定位点为“它所在区域的零点”。 ５、零点：即 top:0px 和 left:0px 。 解释。要把上述内容讲清，得费不少篇幅、画图、示例。也许还是讲不清。 ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ 一、绝对定位 １、“绝对定位”对象，它的定位参照点为：所在空间的“零点”。 所在空间，可以将它想象为一个箱子，并且只是一个空架子，六面都没有箱板。它的作用，是为放在它里面的东西指示定位参照，或说是起到标志作用。如果将上面的Ｂ表框当作箱子，那么定位的参照点、零点就是它的左上角。 ２、在发帖中，因为内容是放在网站的网页的某个区域（某楼），对于帖子中的“绝对定位”对象，如果不给它指定一个区域，它的定位零点就是网站网页的左上角。 所以，制作特效帖时，一般要设置一个表框或层（div）作为整个帖子内容的容器，把它们都装到里面，可以想象成把它们全部放在一口箱子里面，然后再把这口箱子放到发帖区。 根据需要，可以不让“箱子”显示。 那么，这时的“绝对定位”对象的“参照零点”就是它外围（箱子）的左上角。并且，这口“箱子”必须设置定位（绝对或相对，视制作需要） ３、无论箱子的位置发生怎样的改变，箱子内的东西与箱子的相对位置不会改变。这就好比，我们坐在汽车里的１号位，不管汽车开到哪里，我们在车上的位置并不会改变。 ４、绝对定位对象，在整体排版上不参与到其他对象的“顺序排列”中。其他对象的位置变化不影响它的定位位置。 示例及相应代码：
<table
border="8" cellspacing="0" cellpadding="0" style="position: relative;
left: 80; top: 0; width: 400; height: 240" bgcolor="#00CC99" id="table1"
bordercolor="#0000FF"> 从代码可以看出，Ｂ框内的Ａ对象与上面的Ａ对象都为绝对定位，左定位值也一样，但它们在页面的位置不一样 ，因为它们所在的空间（容器）不同，参照零点不同。 ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ 二、相对定位 １、相对定位对象，在整体排版上它参与到其他对象的“顺序排列”中。如果 top:0px; left:0px ，那么在效果上相当于没有设置定位。 ２、相对定位对象的位置，受自身零点（整体排版）及定位值两个因素的影响。 ３、如果给它设置了移位，空出的地方仍为它所有（放不进别的内容），而超出的部分会“侵占”其他对象的位置（与别的对象重迭）。
于下示例一。
１、设置两张图片对象，均设置为相对定位，不设置移位。即top和left的值都为0。 ２、与文字混排。 相对示例一
在示例一的前提下，将图片一左移50（left:-50px），下移40（top:40px）；图片二前面增加一个字符。
可以看到： １、图片一的位置变化了，是因为定位值改变了，但自身的零点（整体排版）没有改变； ２、图片一因左移，盖住了“对”字，而“示”字并没有左移。 这就是“如果给它设置了移位，空出的地方仍为它所有（放不进别的内容），而超出的部分会“侵占”其他对象的位置（与别的对象重迭）”的意思。 ３、图片二的位置变化了，是因为自身的零点改变了，但定位值并没有改变。 也可以这样理解：如果设置了移位，它所占的区域为“原有区域加上“侵占”的区域”。 相对示例二★
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
三、定位对象的迭放顺序（谁在上层，谁在下层） １、用样式代码设置对象的“层”迭放顺序。代码为： z-index:10。 数值大的在上层，小的在下层。 ２、当数个定位对象处于同一平面时（设置了处于同一层或都没有设置层） 后写的处于上层（按代码字符书写的前后）。 以上议论，在pg中尝试编辑一下，很容易明了。
关于定位涉及的“区域”、“空间”、“箱子”，这只是个概念，它作为参照对象，可大可小，设置为可见，也可设置为不可见。也就是说，它不一定要比它里面的对象大，它只起到一个“标志”的作用。
绝对定位对象，它可以跑到参照对象外面，如果它处于参照对象外面的左上方向，那么定位值就是负值了。下图示例中，红框为定位参照对象。从代码上看，黄、白两个绝对定位对象的代码是写在红框的表格代码的“单元格”内的。请注意这一点。
<table border="10" cellspacing="0" cellpadding="0"
style="position: relative; left: 0; top: 0; width: 100; height: 60"
bordercolor="#FF0000">
<tr> <td align="center"><font color="#FFFFFF">空间对象</font> <table border="5" cellspacing="0" cellpadding="0" style="position: absolute; left: -240px; top: -100px; width: 200; height: 100" bordercolor="#FFff00"> <tr> <td align="center"><font color="#FFFFFF">绝对定位对象<br> top:-100; left:-240</font></td> </tr> </table> <table border="5" cellspacing="0" cellpadding="0" style="position: absolute; left: 120px; top: 60px; width: 200; height: 100" bordercolor="#FFFFFF"> <tr> <td align="center"><font color="#FFFFFF">绝对定位对象<br> top:60; left:120</font></td> </tr> </table> </td> </tr> </table>
表述中，常用表格对象举例。请不要误认为只有表格可以设置定位或作为参照空间。层对象<div> 作为空间对象应用得更多。许多对象都可以直接设置绝对定位，不必将它放在表格中，再将表格设置定位。这样，代码简洁，也“节约”。
上面的松鼠就设置了绝对定位，不过，它的参照对象是本段文字所在的区域，div层对象，这个层对象没有显示边框。松鼠（swf）设置代码为： <embed style="LEFT: 585; POSITION: absolute; TOP: -130" src="http://webftp.bbs.hnol.net/dysr/flash/song_shu.swf" width="66" height="80" type="application/x-shockwave-flash" quality="Best" wmode="transparent"> 诸如图片、播放器、文字域、表单、框架等，都可以这样设置。另帖中介绍了超文本代码手册。相关内容查阅一下，一目了然。
|