css定位有哪几种方式？

一、position 定位
position取值
1.static（默认）
2.relative : 相对定位
特点：
（1） 如果没有定位偏移量，对元素本身没有任何影响
（2）不使元素脱离文档流，空间是会被保留。
（3）不影响其他元素布局
（4）left、top、right、bottom是相对于当前元素自身进行偏移的
效果图如下：
首先写入三个盒子:
然后写入相对定位看一下效果：

3.absolute（绝对定位）
特点：
（1）会使元素完全脱离文档流。
（2）是内联元素支持宽高；使块元素默认宽根据内容决定。
（3）生成绝对定位的元素，相对于定位（除了static的其他定位）的祖先元素进行偏移，若没有定位祖先元素，则相对于整个页面进行偏移。如果定义了多个祖先元素，生成绝对定位的元素相对于离其最近的祖先元素（父元素）进行偏移。
例如：


然后加入绝对定位：就会发现绿色盒子脱离文档流


再如图：


然后加入绝对定位：


就会发现若没有定位祖先元素，则相对于整个页面进行偏移。如果定义了多个祖先元素，生成绝对定位的元素相对于离其最近的祖先元素（父元素）进行偏移。

4. fixed（固定定位）：
   特点：
   （1）使元素完全脱离文档里。
   （2）使内联元素支持宽高；使块元素默认宽根据内容决定。
   （3）相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响。
   （4）不会受其祖先元素的影响。
   如下图所示：
   就会发现这个红色方块会一直固定在左上角，且不回收滚动条的影响。
   
   
5. sticky（黏性定位）
   特点：sticky相当于是static和fixed的结合体。给position：sticky；定义一个位置，在没滑到那个位置之前，和没有定位没有区别，但是当滑动到定义的位置之后，就产生了固定定位的特性。
   如下图所示HTML代码：
   
   CSS代码：
   
   运行效果如下图所示;
   
   没有滑动到.show距离top100px的时候，跟没有设置定位没区别，都随着滚动条的滑动而移动。
   当.show到达距离top100px的位置时：
   
   就会发现当滚动条滑到一定位置，该红色标签就会固定在指定位置。