前端css基础知识点之position——定位

前端css基础知识点之position——定位

• 相对位置

position: relative;
left:10px;
top:10px;
 /*相对于自己原来的位置*/

特性
1.不脱标
2.老家留坑 形影不离
3.可以提升层级

作用
1.相对自己进行位置微调
2.配合绝对定位使用

• 绝对定位

position: absolute; 
left:10px;
top:10px;

参考点
1.假如该绝对定位元素没有定位(相对或者绝对或者固定)的祖先元素 则以body为参考点
2.假如有定位的祖先，则以最近的定位祖先元素为参考点

特性
1.脱标
2.假如不设置宽度 则由内容撑开

子绝父相
1.儿子采用绝对定位 父亲采用相对定位，此时儿子就可以在父亲范围内任意确定位置

• 固定定位

position: fixed; 
left:10px或50%;
top:10px或50%;

参考点

始终以浏览器窗口左上角