前言
- 介绍下css中position属性
- position属性有哪些值以及各自的用法
- 介绍下相对定位、绝对定位、固定定位的区别
static 静态定位
所谓静态定位，就是我们的标准流。
在标准流里面，块级元素独占一行，内嵌元素共享一行。静态定位是HTML元素的默认值，静态定位的元素不会受到top、bottom、left、right的影响。
relative 相对定位
所谓相对定位，就是相对自己原来的位置进行定位。相对定位的最大特点就是不脱离标准流，相对于自己原来的位置进行一定的偏移。
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
div {
height: 200px;
width: 200px;
border: 1px solid #ccc;
}
.two {
position: relative;
top: 100px;
left: 100px;
}
可以看到，我们对two这个盒子设置了left值为100px，top值为100px，而由于是相对这个位置进行偏移，所以two这个盒子向右下进行了移动。
使用相对定位的作用主要有两个：
- 微调元素
- 做绝对定位的参考(子绝父相)
absolute 绝对定位
所谓绝对定位，就是相对于离自己最近的，并且定了位的祖先元素进行偏移。使用了绝对定位后的盒子，会脱离标准流，设置的margin也会失效。
绝对定位的盒子的display会变为block。可以参考如下例子：
<span>testtest</span>
span {
position: absolute;
height: 100px;
width: 100px;
top: 50px;
left: 50px;
background-color: red;
}
在浏览器中的浏览效果如下：原本不能设置宽高的行内元素（span），在进行了绝对定位以后，display属性变为了block，所以可以设置宽高了。
这里要重点强调一下绝对定位的参考点问题。默认情况下，绝对定位的参考点，如果用top来进行描述，那么定位参考点就是页面的左上角，而不是浏览器的左上角，如下图:
如果是使用bottom来进行描述，那么就是浏览器首屏窗口尺寸，对应的页面左下角,如下图
上面介绍的是绝对定位里参考点的默认情况，但是这种情况一般使用得非常的少。更多的则是使用接下来我们将要介绍的参照标准。
前面我们在介绍相对定位的时候，有提到子绝父相这个名字。事实上，当我们对一个元素设置绝对定位的时候，往往会将它的父级元素设置为相对定位。
这样的好处在于该元素的父级元素没有脱离标准流，该元素将会以这个相对定位了的父元素作为参考点，在父元素的范围内进行移动，方便我们对元素的位置进行掌控。如下图:
在该图中，容器盒子设置为相对定位，红色盒子为绝对定位。红色盒子将无视父元素的padding区域，以父元素的border内侧作为自己定位的参考点。
需要大家记住的是当祖先元素出现有定位时，绝对定位的参考点永远都是离自己最近的，并且定了位的祖先元素的左上角，下面我们来举例子进行说明，如下：
<div class="one">
<div class="two">
<div class="three"></div>
</div>
</div>
.one {
width: 400px;
height: 400px;
background-color: red;
position: relative;
overflow: hidden;
}
.two {
width: 200px;
height: 200px;
background-color: blue;
position: absolute;
top: 50px;
left: 50px;
}
.three {
width: 100px;
height: 100px;
background-color: green;
position: absolute;
top: 0;
left: 0;
}
在浏览器中的浏览效果如下：这里three盒子就是以two盒子的左上角作为的参考点。
fixed 固定定位
所谓固定定位，可以看作是一种特殊的绝对定位，所以固定定位也是会脱离标准流的。
固定定位的特点是相对于浏览器窗口进行定位的。
换句话说，对一个盒子进行固定定位以后，无论页面如何滚动，这个盒子的显示位置都是不会变化的。
固定定位在PC端中经常用于显示在页面中位置固定不变的页面header，以及移动端中位置固定不变的header和footer。
sticky 粘性定位（CSS3新增）
在CSS3中，新增了一种定位方式：sticky。
sticky，中文的字面意思是"粘贴"的意思，所以这种定位方式可以称之为粘性定位。
目前大部分浏览器都已经支持了这种定位方式。
要设置一个元素的定位方式为粘性定位，首先需要将position属性设置为sticky。
position: sticky;
sticky定位还需要注意以下内容：
父元素的overflow必须是visible，不能是hidden或者auto。
父元素的高度不能低于sticky元素的高度。
如果父元素没有设置定位(position: relative | absolute | fixed)，则相对于viewprot进行定位,否则以定位的父元素为参考点。
设置阈值：需要指定top、right、bottom或left四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。并且top和bottom同时设置时，top生效的优先级高；left和right同时设置时，left的优先级高。
粘性定位的适用场景如下：
- 悬浮导航栏或工具栏，使用户能够方便地导航网页。
- 表格中的标题行，使其在滚动表格内容时保持可见。
- 滚动时固定在页面上方的广告条或联系方式。
总结
- static：该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。
- relative：相对定位的元素是在文档中的正常位置偏移给定的值，但是不影响其他元素的偏移。
- absolute：相对定位的元素并未脱离文档流，而绝对定位的元素则脱离了文档流。在布置文档流中其它元素时，绝对定位元素不占据空间。绝对定位元素相对于最近的非static祖先元素定位。
- fixed： 固定定位与绝对定位相似，但元素的包含块为viewport视口。该定位方式常用于创建在滚动屏幕时仍固定在相同位置的元素。
- sticky：粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。
