用Div+CSS进行网站布局时,做一些浮动层等特殊特殊效果时要考虑到定位问题。这就要用到Position属性等。 Position属性有四个值: static、fixed、absolute和relative,后面两个在布局中的定位里是经常用到的,顾名思义,[color=red]absolute是指绝对定位,即将对象从文档流中拖出[/color],使用left,right,top,bottom等属性进行绝对定位,而其层叠通过z-index属性定义。此时对象不具有边距,但仍有补白和边框。ralative是指相对定位,就是依据left,right,top,bottom等属性[color=red]在正常文档流中偏移位置,其位置偏移就会以该元素的[b]原来位置[/b]作为参考点[/color]。
1、当Position属性值为Relative时
[color=red]对象原来占有的位置保留,其后面的对象按原来文档流仍然保持原来的位置[/color]
Top的值表示对象相对原位置向下偏移的距离
bottom的值表示对象相对原位置向上偏移的距离
两者同时存在时,只有Top起作用。
left的值表示对象相对原位置向右偏移的距离
right的值表示对象相对原位置向左偏移的距离
两者同时存在时,只有left起作用。
2、当Position属性值为absolute时
[color=red]对象从文档流中抽取出来,原占有的位置被后面的对象顶替上来[/color]
Top的值表示对象上边框与浏览器窗口顶部的距离
bottom的值表示对象下边框与浏览器窗口底部的距离
两者同时存在时,只有Top起作用;如果两者都未指定,则其顶端将与原文档流位置一致,即垂直保持位置不变。
left的值表示对象左边框与浏览器窗口左边的距离
right的值表示对象右边框与浏览器窗口右边的距离
两者同时存在时,只有left起作用;如果两者都未指定,则其左边将与原文档流位置一致,即水平保持位置不变。
[color=red]在Position属性值为absolute的同时,[b]如果有一级父对象(无论是父对象还是祖父对象,或者再高的辈分,一样)的Position属性值为Relative时[/b],则上述的相对浏览器窗口定位将会变成相对父对象定位,这对精确定位是很有帮助的。如果不存在设置relative的父级元素,那么absolute元素就会以body标签当作参考点。[/color]
参考:[url=http://blog.sina.com.cn/s/blog_6c5b9c870100q004.html]深入理解position:relative 与 position:absolute[/url]
1、当Position属性值为Relative时
[color=red]对象原来占有的位置保留,其后面的对象按原来文档流仍然保持原来的位置[/color]
Top的值表示对象相对原位置向下偏移的距离
bottom的值表示对象相对原位置向上偏移的距离
两者同时存在时,只有Top起作用。
left的值表示对象相对原位置向右偏移的距离
right的值表示对象相对原位置向左偏移的距离
两者同时存在时,只有left起作用。
2、当Position属性值为absolute时
[color=red]对象从文档流中抽取出来,原占有的位置被后面的对象顶替上来[/color]
Top的值表示对象上边框与浏览器窗口顶部的距离
bottom的值表示对象下边框与浏览器窗口底部的距离
两者同时存在时,只有Top起作用;如果两者都未指定,则其顶端将与原文档流位置一致,即垂直保持位置不变。
left的值表示对象左边框与浏览器窗口左边的距离
right的值表示对象右边框与浏览器窗口右边的距离
两者同时存在时,只有left起作用;如果两者都未指定,则其左边将与原文档流位置一致,即水平保持位置不变。
[color=red]在Position属性值为absolute的同时,[b]如果有一级父对象(无论是父对象还是祖父对象,或者再高的辈分,一样)的Position属性值为Relative时[/b],则上述的相对浏览器窗口定位将会变成相对父对象定位,这对精确定位是很有帮助的。如果不存在设置relative的父级元素,那么absolute元素就会以body标签当作参考点。[/color]
参考:[url=http://blog.sina.com.cn/s/blog_6c5b9c870100q004.html]深入理解position:relative 与 position:absolute[/url]