作者：wx@ay
摘自
我的梦想世界-----------------------------------------------------------------------------------------------------------------------------------------
网页对分辨率的自适应
层的相对定位的简单示例
--posted by wx@ay
作为一个网页设计人员（许多人只认为是制作人员--悲哀
）为了网页的兼容总是费尽心思。当今浏览器可以说主流是IE和NN，而就这么两个互相之间标准还不统一，如果说要兼顾到这两种浏览器的话，可能你的工作会成倍地增长。而不考虑兼容的话，你又算不上一个好的设计人员。这还不够，还要考虑用户可能使用的监视器会是多大、分辨率会是多少等等等等，记得很久以前上网时，总是可以看到某些网站上写着“请使用XX浏览器XX版本以上，XXX乘XXX分辨率以获得最佳效果”这样的话语，想想这应该也算是无可奈何的流露吧。
好了，牢骚发完了(一个业余的，你还这么多废话)，讲讲正体吧
为了让网页能够自动地适应用户设置的分辨率，在网页制作过程中人们采用了百分比的设置方式。例如你看到的这个页面，整个就是一个居中的三列的表格，表格宽度占整个页面的100%,左、右两列各占用了表格的10%，中间部分占用了80%,因此它可以自动适应屏幕的分辨率来调整自身大小。而层却不是那么简单。我经常可以在许多的论坛上看到关于询问如何让层和表格一样能够自适应的问题。
其实使用Dreamweaver的朋友都应该明白，Dreamweaver已经给我们提供了方便的可视化的CSS编辑能力，而在CSS标准中，早就有了关于网页元素的定位的设置，如果了解CSS标准的朋友一定很清楚，Positioning（定位）选项就是设置网页排版中元素的定位的选项。
在Positioning（定位）选项中，TYPE中提供了：Absolute（绝对）、Relative（相对）和Static（静止）三种选择，这就是决定网页中某个元素是相对定位还是绝对定位的关键。
你所看到的这个页面，中间的文字是在层中放置的，如果你调整浏览器窗口的话，你会发现这个层也在跟着浏览器大小的改变而改变它的位置。 并且它的大小也象表格一样是在改变的。在CSS中是这样定义的：
.ceng { font-family: "宋体"; font-size: 9pt; line-height: 12pt; color: #000000; overflow: auto; position: relative; visibility: inherit; z-index: auto; clip: rect( ); width: 80%}
最开始的东西我想大家都明白了，我就不说了，主要说说相对定位部分的设置:
其中position: relative; 定义了这个类的定位是相对的，
overflow: auto; 定义当中的内容超出范围时出现滚动条。
width: 80% 则定义了使用这个类的元素的宽度。
在网页制作时，创建一个层以后，你可以在CSS浮动面板中选择应用CSS类，同时你需要指定相对于哪个HTML元素来应用。例如本页中是相对于TD标签的。此时层的属性面板上的设置均是针对TD来做设置的。查看本页原文件便可知详细情况：
div id="neirong" style="position:absolute; z-index:1; ; left: 25pt; top: 5pt; width: 80%; height: 370" class="ceng"
其中left: 25pt; top: 5pt; 就是定义这个层的位置是相对于表格单元格的放置位置的。
当然，以上的设置示例只是一个基本例子，在实际应用当中你可能需要考虑更多的可能的情况，例如与其他元素相互之间的协调配合等，在此就不再详细说了。
一点说明：本页面中CSS设置仅针对IE，页面字体和位置在NN中将有所改变，另外，NN对层的溢出属性不支持。
以上为个人使用Dreamweaver的过程中的一点经验总结，欢迎各位批评指正。
