理解position 绝对定位和相对定位

时间:2024-01-11 08:06:26

一、position的三种取值

1、取值

Position :   static /  absolute / fixed / relative
static:静态   absolute:绝对定位    fixed:固定   relative:相对定位

默认情况下:static             无特殊定位,对象遵循HTML定位规则

absolute : 将对象从文档流中抽出,使用left,right,top,bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距,但仍有补白和边框。
relative : 对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置
fixed :  E5.5及NS6尚不支持此

2、理解relative和absolute取值

(1)relative

不脱离文档流、对象不能重叠、依据left;right;top;bottom(四个至少有一个存在具体的值)等属性在正常文档流中偏移自身位置(换言之,相对于自己定位的)

(2)absolute

脱离文档流、然后使用left;right;top;bottom(四个至少有一个存在具体的值)等属性相对与其最接近的一个最有定位设置的父级对象进行绝对定位,如果父级对象没有设置定位属性,那么将遵循HTML的定位规,以body的左上角为参考进行定位、

绝对定位的对象可以重叠,层叠的顺序可以通过z-index属性进行控制,大的在上面  

二、relative和absolute的区别

1、是否完全脱离了文档流

2、relative是相对于自己进行偏移定位,absolute是相对于最近具有定位设置的父级对象进行绝对定位

3、对象是否能重叠的问题(z-index改变层级关系)

【题外话】最近定位用的挺多的,例如导航菜单为了有点效果,通过相对定位让它看起来有点特别,还有一些效果,对联式的广告悬浮框、还有回到顶部等。不错不错,good good study,daydayup!