相对定位、绝对定位、固定定位、粘性定位

普通流

普通流就是HTML文档中的元素如块级元素、行内元素依据他们的显示属性按照在文档中的先后次序依次显示。是块级元素就占一行或多行，是行内元素就和其他元素共处一行
流的概念

• 文档流是相对于盒子模型讲的
• 文本流是相对于文字段落讲的

定位机制

CSS有三种基本的定位机制：普通流、浮动和绝对定位。除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在（X）HTML中的位置决定。

定位

默认值为static。可应用于所有元素。（position：static）static元素框正常生成：块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
1.相对定位（position：relative）
relative：

• 相对定位，如果没有偏移量(left/right/top/bottom)就是正常显示；
• 根据原来的位置进行偏移；
• 不会使元素脱离文本流。
  2.绝对定位（position：absolute）
  absolute：
• 如果使用绝对定位，有定位祖先元素就相对于定位祖先元素发生偏移，没有定位祖先元素就会相对于整个文档发生偏移（绝对 相对 固定）
• 使元素脱离文档流和文本流
  3.固定定位（position：fixed）
• 相对于整个窗口进行定位，不会受滚动条影响；
• 使元素脱离文档流和文本流
  4. 粘性定位
  sticky：（这是css3新增的属性值）粘性定位。最初会被当作是relative，相对于原来的位置进行偏移；一旦超过一定阈值之后，对被当成fixed定位，相对于视口进行定位。
  使用条件：
  1、父元素不能 overflow:hidden 或者 overflow:auto 属性；
  2、必须指定 top、bottom、left、right4 个值之一，否则只会处于相对定位；
  3、父元素的高度不能低于 sticky 元素的高度；
  4、sticky 元素仅在其父元素内生效。
  z-index设置元素的堆叠顺序
  z-index的使用条件就是必须使用了定位之后才可以生效。