关于相对于绝对定位

 

这篇文章是2000年时写的，那时有一个织梦论坛，站长是Jet，当我发了这个帖子后就被Jet邀请做了个版主，人生第一次当版主，确实挺兴奋的。

 

在那个年代，WEB页面有一个相对定位的问题无人解决，页面上的元素要么绝对定位，要么左右对齐，我这篇文章首次解决了相对定位的难题，所以一出现立刻一石激起千层浪。

 

由于文章年久失修，图片已丢失，文章放这里纪念一下，以下是原文：

-----------------------------------------------------------

 

关于相对于绝对定位的问题经过一阵研究与借鉴他人经验，得出入下结论：
一. 常出现的问题

当你的表格选居中的时候又插入了层（插入层方法1：object->draw layer）的时候（800*600），分辨率一旦变大、窗口最大化之后，层就错位了，而如果使用菜单(插入层方法2：Insert->Layer)插入层的时候，这个层就会与它的上级元素相对定位，但是一旦在Dreamweaver中用移动工具动了它，它就会马上变成绝对定位，不会再与上级元素相对定位了。

二. 思想：

通过object面板置入的层是绝对定位的层，这个绝对定位指的是层的左上角与浏览器窗口内部的左部、顶部距离，代码中的写法是left与top。
通过菜单置入的层是相对定位的层，这个相对定位指的是层与它的上级元素的距离（它的上级元素的左上角），由于这个div中不再有left与top的属性，所以浏览器把它的位置定为与它的上级元素相同

（总结一：只要去掉层的left与top属性就可以相对定位！）


三. 深入思想：

现在层已经相对定位了，可是只是这样还完全不能满足要求，因为很多时候不能把表格设定得那样准确，否则会把表格搞得很麻烦，把代码搞得很大很大。
如果在上面说做出的相对定位的层的基础上再做一个层对它相对定位，不就解决问题了吗？
这就涉及到了父层与子层的问题（由于它是层的基础，在书与网上教程中就可以看到，这里不再阐述），父层相对于某点定位，而子层相对于父层定位，就可以达到层的相对定位这个目标了

四. 具体制作（只介绍最简单的方法，对代码熟的朋友可以手敲的）：

先在页面内插入表格（可以设居中，表格就居中了，否则几乎无意义），鼠标在某单元格内点一下，让光标在此闪动，然后通过菜单插入一个层，这个层就相对与这个单元格定位了。插入一个层之后，不要动它，而且也永远不要动，但是可以更改它的大小，比如把它的高与宽都改成"0"，让它不再影响你对其他内容的编辑，否则，这个层的left与top属性出现之后就成了绝对定位了，变成绝对定位后你可以把它的left与top属性去掉，就恢复成相对定位了。变成"0"之后，有时子层会看不见，可以按[f11]键点它恢复编辑。
现在光标在这个层内闪动，再通过菜单插入子层，这时子层与父层重叠，你可以随意移动它，不管怎么动，它都是相对与父层定位。
好了，一个相对定位的层（子层）做好了，你可以在里面随意添加内容了，也可以改变它的尺寸、位置、背景等所有属性，但是不要动left与top属性，因为它是相对于父层的左上角定位的。

下面给出父层与子层在Dreamweaver中的属性面板：

父层：

 

子层：

 

五. 技巧：

先插入一个表格,在其中一个单元格中插入父层，可以把它定得小一点，比如说20象素宽、10象素高，这样它就不会盖住下面的链接，也不影响子层的相对定位。
如果要用778象素宽定义表格，可以把父层插入到表格的第一行第一个单元格中，这样就可以在所有层制作完后插入父层了！对代码熟的朋友就可以手敲父层而不必再去调整子层的位置了。


六. 结束语：

欢迎转载、欢迎批评，欢迎大家前来交流，转载请注明出处