CSS定位中Positoin的absolute及Relative等的研究
前言：还差8分就落伍了。发篇前几天写的技术文章，看看够不够落伍。用Div+CSS进行网站布局时，做一些浮动层等特殊特殊效果时要考虑到定位问题。这就要用到Positoin属性等。
Positoin属性有四个值： static、fixed、absolute和relative，后面两个在布局中的定位里是经常用到的，顾名思义，absolute是指绝对定位，即将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位，而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框。ralative是指相对定位，就是依据left，right，top，bottom等属性在正常文档流中偏移位置。
但是，怎么个绝对法，又怎么个相对法呢？以前我一直没有仔细去研究它，到具体应用时有时会有点迷糊，我相信很多朋友也会有这样的问题。今天我特意测试了一下，得出了以下结论：
1、当Positoin属性值为Relative时
对象原来占有的位置保留，其后面的对象按原来文档流仍然保持原来的位置
Top的值表示对象相对原位置向下偏移的距离
bottom的值表示对象相对原位置向上偏移的距离
两者同时存在时，只有Top起作用。
left的值表示对象相对原位置向右偏移的距离
right的值表示对象相对原位置向左偏移的距离
两者同时存在时，只有left起作用。
2、当Positoin属性值为absolute时
对象从文档流中抽取出来，原占有的位置被后面的对象顶替上来
Top的值表示对象上边框与浏览器窗口顶部的距离
bottom的值表示对象下边框与浏览器窗口底部的距离
两者同时存在时，只有Top起作用；如果两者都未指定，则其顶端将与原文档流位置一致，即垂直保持位置不变。
left的值表示对象左边框与浏览器窗口左边的距离
right的值表示对象右边框与浏览器窗口右边的距离
两者同时存在时，只有left起作用；如果两者都未指定，则其左边将与原文档流位置一致，即水平保持位置不变。
在Positoin属性值为absolute的同时，如果有一级父对象（无论是父对象还是祖父对象，或者再高的辈分，一视同仁，^_^）的Positoin属性值为Relative时，则上述的相对浏览器窗口定位将会变成相对父对象定位，这对精确定位是很有帮助的。
更多有关CSS的说明请参考手册：[url]http://www.biglee.cn/books/css/[/url]
辛苦了半天得出的结论，希望对大家有用。如果有疏忽之处，还请指正。
此文在我博客中的地址：[url=http://www.biglee.cn/Blog/article.asp?id=132]http://www.biglee.cn/Blog/article.asp?id=132[/url]
后话：本来是想加上图片做解释的，但由于这几天比较忙，只好先纯文字了。等有空了，再好好改改。 见鬼，为什么链接被转成这个样子了？ 呃，好像没人看。 庆祝一下。成功落伍了。 楼主，你知道mjj是谁吗？好像很有名哦，是不是站长管理员啊？
回复 铁牌 o-o 的帖子
报告，我认识他，你要是MM留QQ我告诉你..:lol: 我qq是77580878，你告诉我把 :lol: [quote]原帖由 [i]o-o[/i] 于 2008-7-24 13:16 发表 [url=http://www.im286.com/redirect.php?goto=findpost&pid=27997995&ptid=2758917][img]http://www.im286.com/images/common/back.gif[/img][/url]楼主，你知道mjj是谁吗？好像很有名哦，是不是站长管理员啊？ [/quote]
不知道。
页:
[1]