css定位属性

• CSS 有三种基本的定位机制：普通流、浮动流、定位流。
今天先说说定位流：
position定位属性，检索或设置对象的定位方式。
position的属性值：

1：static 静态定位：
static是position的默认值，默认文本流的状态，不会识别left right top bottom指定的坐标。

2：absolute 绝对定位：
a:相对于父级元素的绝对定位，浮出，脱离布局流，它不占据空间，会按照有定位的父级元素进行位置的变化。
b:假如当前没有父元素或者父元素没有定位的情况下，就以整个文档为参照物。

包含块是绝对定位的基础，包含块就是为定位元素提供坐标，偏移和显示范围的参照物，即确定绝对定位的偏移起点和百分比 长度的参考；
默认状态下，html是一个大的包含块，所有绝对定位的元素都是根据窗口来定自己所处的位置和百分比大小的显示的，如果我们定义了包含元素为包含元素块以后，对于被包含的绝对定位元素来说，就会根据最接近的具有定位功能的上级包含元素来定位自己的显示位置。
定义元素为包含块：给绝对定位元素的父元素添加声明position：relative；

3：relative 相对定位：
relative是相对默认位置的相对定位，通过设置left、right、top、bottom的值可将其移至相对位置且始终占据空间，不会破坏布局流。

4：fixed 固定定位：

相对浏览器的绝对定位，是相对于浏览器窗口的指定坐标进行定位；fixed会脱离整个文档流且不占据空间。

5：sticky 黏性定位：

position：sticky可以看成是position：relative和position：fixed的结合；如果没超出窗口范围，按relative执行，超出就按fixed执行。