好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

CSS的绝对定位_html/css_WEB-ITnose

CSS的绝对定位:
一.基本概念:
如果说相对定位没有脱离文档流,相对于对象本身进行偏移有点拖泥带水的话,那么绝对定位绝对是快刀斩乱麻,因为绝对定位可以使一个对象脱离正常的文档流,好像是漂浮在正常文档流的上空,并相对于包含此对象的元素进行定位,当然这个定位相对元素在不同的情况下也有所不同。
二.如何将一个元素设置为绝对定位:
为对象添加如下属性即可将对象设置为绝对定位:

position:absolute; 或者 position:fixed 

三.定位参考对象:
可以使用top属性和left属性设置绝对定位对象的偏移量。
绝对定位虽然脱离了文档流,但是也需要有定位的参考对象,不过在不同的情况下参考对象也是不同。
1.如果没有设置top或者left属性值,那么相应方位的定位参考对象就是此对象的一级父元素,代码实例如下:

           CSS的绝对定位-蚂蚁部落     body { margin:20px; } #grandfather { width:330px; height:300px; background-color:#F90; } #father { width:200px; height:200px; background-color:green; margin-left:50px; } #children { width:100px; height:100px; background-color:red; float:right; } #inner { width:50px; height:50px; background-color:blue; position:absolute; top:10px; }       

查看更多关于CSS的绝对定位_html/css_WEB-ITnose的详细内容...

  阅读:36次