对于position定位的认识

开发工具与关键技术：html+css
作者： 李伙
撰写时间： 2019年2月18日

position属性控制页面上元素间的位置关系，也就是排版。首先，我们先了解position的各个属性值：
⑴static：页面元素默认的定位。
⑵relative(相对定位)：相对于自己现在的位置（默认的位置）进行定位。可以用top,right,bottom,left.属性来改变它的位置。多数情况下用top和left就可以了。效果如下：


⑶absolute(绝对定位)：可以用top,right,bottom,left.属性来改变它的位置。多数情况下用top和left就可以了。absolute绝对定位的定位点在浏览器的左上角。效果如下：


也可以用relative和absolute配合使用来改变我们的定位点。效果如下：


⑷fixed(固定定位)：可以用top,right,bottom,left.属性来改变它的位置。多数情况下用top和left就可以了。效果如下：



如图所示：无论鼠标怎么移动橙色的盒子都会固定在同一个位置上。