定位: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;