基础-定位

标签：

CSS盒子定位有四种

　　标准流定位　　  position: static;
　　相对定位　　　　position: relative;
　　绝对定位　　　　position: absolute;  
　  固定定位　　　　position: fixed;　

调整定位
　　top　　 right 
　　bottom left
　　推拉盒子

相对定位

　　相对自己原来的位置进行移动

　   position: relative;
　　 left: 30px;  top: 30px;

 　　特点
　　　　不脱离标准流
　　　　留坑，真身还在原来的位置
　　　　形影分离，影子会覆盖标准流元素

　　  用途
　　　　微调元素
　　　　做绝对定位的参考，"子绝父相"

绝对定位
　　相对最近的祖先元素且具有position的位置进行移动

　　position: absolute;

　　特点
　　　　脱离标准流
　　　　无视文档流padding的影响

　　特殊参考点
　　　　祖先元素中没有合适的参考元素
　　　　top　　　　表示　 首屏窗口左上角的点为参考点
　　　　bottom　　表示　　首屏窗口左下角的点为参考点

静态定位

　　position: static;

　　约等于标准流

　　让已经定位的改为不定位

固定定位

　　position: fixed;

$为什么要使用"子绝父相"

　　"子绝"　　相对定位会占坑，不合适

　　"父相"　　绝对定位会脱离标准流，不合适

基础-定位

标签：

原文地址：http://www.cnblogs.com/WeWeZhang/p/5697766.html