【CSS定位position】

来源:互联网 发布:机械力学分析软件 编辑:程序博客网 时间:2024/05/29 05:11

【CSS定位position】




定位:position

概念:把一元素放置到需要放的网页位置;

属性值:static、relative、absolute、fixed、inherit;

位置声明:top、bottom、left、right;

absolute、fixed会使元素脱离文档流;

特点:所有元素都可以进行定位处理,定位后具有块的属性。


相对定位:relative

使元素偏移某个距离,所占空间仍然保留;

实际开发:元素不会脱离文档流,但是可以设置top、left等值进行操作,而且设置也是生效的。

1、如果元素的前面没有其他元素时,参照父级(最近)的内容区的左上角为原始点结合top、left、right、bottom属性进行定位;

2、如果元素的前面有其他元素,则针对上一个元素的位置进行定位。


绝对定位:absolute

设置绝对定位的元素,会脱离文档流;(具有层叠关系)

激活元素的absolute,必须指定left,right,top,bottom 属性中的至少一个;

绝对定位的元素相互层叠时,不具有 margin效果,但仍有 padding 和 border效果 。


绝对定位与相对定位的关系

(相对定位是相对于元素在文档流中初始位置的;而绝对定位是相对于最近的已经定位的祖先元素。)

1、如果父级(无限)没有设定position属性,那么当前的absolute则结合top,right,left,bottom属性以浏览器左上角为原始点进行定位;

2、如果父级(无限)设定position属性,且属性值为relative、absolute、fixed,那么当前的absolute则结合top,right,left,bottom属性以父级(最近)的左上角为原始点进行定位。


相对浏览器定位:fixed

相对于浏览器窗口的指定坐标定位;

元素的位置可通过left、right、top、bottom属性来规定;

IE6.0及以下版本的浏览器不支持position: fixed;

原创粉丝点击