用 Div+CSS 进行网站布局时, 做一些浮动层等特殊特殊效果时要考虑到定位问题; 这就要用到 Position 属性. Position 属性有四个值: static,fixed,absolute 和 relative.
后面两个值在布局中的定位里是经常用到的, 顾名思义:
● absolute 是指绝对定位, 即将对象从文档流中拖出, 使用 left,right,top,bottom 等属性进行绝对定位, 而其层叠通过 z-index 属性定义. 此时对象不具有边距, 但仍有补白和边框.
● ralative 是指相对定位, 就是依据 left,right,top,bottom 等属性在正常文档流中偏移位置.
但是, 怎么个绝对法, 又怎么个相对法呢?
以前我一直没有仔细去研究它, 到具体应用时有时会有点迷糊, 我相信很多朋友也会有这样的问题. 今天我特意测试了一下, 得出了以下结论:
1, 当 Position 属性值为 Relative 时
对象原来占有的位置保留, 其后面的对象按原来文档流仍然保持原来的位置.
top 的值表示对象相对原位置向下偏移的距离, bottom 的值表示对象相对原位置向上偏移的距离. 两者同时存在时, 只有 Top 起作用.
left 的值表示对象相对原位置向右偏移的距离, right 的值表示对象相对原位置向左偏移的距离. 两者同时存在时, 只有 left 起作用.
2, 当 Position 属性值为 absolute 时
对象从文档流中抽取出来, 原占有的位置被后面的对象顶替上来.
● top 的值表示对象上边框与浏览器窗口顶部的距离, bottom 的值表示对象下边框与浏览器窗口底部的距离.
两者同时存在时, 只有 top 起作用; 如果两者都未指定, 则其顶端将与原文档流位置一致, 即垂直保持位置不变.
● left 的值表示对象左边框与浏览器窗口左边的距离, right 的值表示对象右边框与浏览器窗口右边的距离.
两者同时存在时, 只有 left 起作用; 如果两者都未指定, 则其左边将与原文档流位置一致, 即水平保持位置不变.
在 Position 属性值为 absolute 的同时, 如果有一级父对象 (无论是父对象还是祖父对象, 或者再高的辈分, 一样) 的 Position 属性值为 Relative 时, 则上述的相对浏览器窗口定位将会变成相对父对象定位, 这对精确定位是很有帮助的.
来源: http://www.css88.com/qa/css3/11435.html