【CSS定位position】

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；