div+css 相对定位和绝对定位 absolute&&relative

绝对定位和相对定位

概念:

      

绝对定位(absolute):将被赋予此定位方法的对象从文档流中拖出,使用left,right,top,bottom等属性相对于其最接近的一个最有定位设置的父级对象进行绝对定位,如果对象的父级没有设置定位属性,即还是遵循HTML定位规则的,则依据body对象左上角作为参考进行定位。绝对定位对象可层叠,层叠顺序可通过z-index属性控制,z-index值为无单位的整数,大的在最上面,可以有负值(目前负值FF不支持)。

相对定位(relative):对象不可层叠,依据left,right,top,bottom等属性在正常文档流中偏移自身位置。同样可以用z-index分层设计。


1:绝对定位:position:absolute;主要是通过设置对象的top,right,bottom,left四个方向的边距值来实现。一旦对象采用了绝对定位,它就完全摆脱了文档流与浮动模型,独立存在。

 注意:当对b进行绝对定位后,b就失去了占位信息,其它元素流动到b元素位置。

2:相对定位:其实它是浮动定位与绝对定位的扩展方式。相对定位使得被设置的元素保持与其原始位置相对,并不破坏其原始位置信息。

链接:上文链接


总结:相对是相对其自身原有的占位,并保留原有的占位(自私的)

            绝对是指在最近具有定位位置的父级对象中的绝对位置,不保留原有的占位(绝对唯一)。

你可能感兴趣的:(div+css 相对定位和绝对定位 absolute&&relative)