三种定位的介绍

三种定位的介绍

1.绝对定位（postion：absolute）

相对祖籍元素中具有position属性：且值不为static的元素进行绝对定位
————>如果所有的元素都没有position 就相对body进行定位
定位后，块元素变为行内块元素；脱离文档流；原来的位置被其他位置所占据
如何定位：
top：【定位元素】距离【相对元素】上面距离
left：【定位元素】距离【相对元素】左边距离
right：【定位元素】距离【相对元素】右边距离
bottom：【定位元素】距离【相对元素】下面距离

2.相对定位（position：relative）

相对自身位置进行定位
定位后：元素脱离文档流；原来的位置没有被其它元素占据元素特点没有发生变化。
top:移动后的位置 距离起始位置【上面】的位置(往下移动)
left:移动后的位置 距离起始位置【左边】的位置(往右移动)
right:移动后的位置 距离起始位置【右边】的位置(往左移动)
bottom:移动后的位置 距离起始位置【下面】的位置(往上移动)
用途：用于某个元素微调效果

3.固定定位（position：fixed）

相对浏览器视图窗口进行定位
定位后：当前元素变为inline-block脱离文档流；原来的位置被其他元素所占据
如何定位的：
top 距离浏览器窗口上边距离
left 距离浏览器视图窗口左边距离
right 距离浏览器视图窗口右边距离
bottom 距离浏览器视图窗口下边距离