对position定位的理解与整理

我们先来看一个效果，同时思考一下用标准流或浮动能否实现类似的效果？

场景1： 某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子.

结论**：要实现以上效果，**标准流 或 浮动都无法快速实现

所以：

1.浮动可以让多个块级盒子一行没有缝隙排列显示， 经常用于横向排列盒子。

2.定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。

静态定位是元素的默认定位方式，无定位的意思。它相当于 border 里面的none，静态定位static，不要定位的时候用。

语法：

选择器 {     position: static; }

静态定位 按照标准流特性摆放位置，它没有边偏移。

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的

语法：

选择器 {  	position: absolute;  }

如果父元素没有定位，则以浏览器为准定位（Document 文档）。

父元素要有定位

元素将依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。

绝对定位的特点总结：

1.如果没有祖先元素或者祖先元素没有定位，则以浏览器为基准定位（document 文档）。

2.如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。

3.绝对定位不再占有原先的位置。所以绝对定位是脱离标准流的。（脱标）

1.3.4. 固定定位(fixed) - 重要

固定定位是元素固定于浏览器可视区的位置。（认死理型） 主要使用场景： 可以在浏览器页面滚动时元素的位置不会改变。

语法：

选择器 {  	position: fixed;  }

1.3.6 定位总结

定位模式是否脱标移动位置是否常用

static 静态定位 否 不能使用边偏移 很少

relative 相对定位否 (占有位置)相对于自身位置移动基本单独使用

absolute绝对定位是（不占有位置）带有定位的父级要和定位父级元素搭配使用

fixed 固定定位是（不占有位置）浏览器可视区单独使用，不需要父级

注意：

边偏移需要和定位模式联合使用，单独使用无效；

top和 bottom不要同时使用；

left和 right不要同时使用。