css之position那些事儿

最近参加一次面试，由于没有准备，被面试官虐惨了，不过这是好事，说明自己还有很多不足。进入正题：面试官问我position这块的时候，我有点卡壳，一个是关于fixed的相对定位和sticky粘性定位。下面有关position，我就做一个全面的总结。

position设置的值有哪些：

• static ---- 静态定位（默认）
• relative ---- 相对定位
• absolute ---- 绝对定位
• fixed ---- 固定定位
• sticky ---- 粘性定位
• inherit ---- 规定应该从父元素继承 position 属性的值。
• initial ---- initial关键字用于设置 CSS 属性为它的默认值，可作用于任何 CSS 样式
• unset ---- 是 initial 和inherit 的组合:

1、static (默认值)
静态定位
没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明），可以把已定位的元素取消定位 。
使用场景：某些特殊情况下，你想覆盖原有的定位，就可以设置position:static 。
有10个 div, 想让其中一个不定位,其他九个全部绝对定位,这时就可以单独为这个div设置static。

2、relative
相对定位
相对定位是相对于元素原来的位置进行定位准确的说是相对于原来的位置的左上角进行定位并且保持其未定位前的形状，它原本所占的空间仍保留。

3、absolute
绝对定位
元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。它不会保留原来所占据的空间

4、fixed
固定定位
元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform, perspective(定义 3D 元素距视图的距离) 或 filter 属性非 none 时，容器由视口改为该祖先。
注：viewport (视口)就是浏览器显示页面内容的屏幕区域

fixed的定位注意两点：一是 固定定位是相对于屏幕视口的位置 二是如果当前元素的祖先的tranform(属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜) ，perspective(定义 3D 元素距视图的距离) ，filter属性(滤镜)，容器由视口改为该祖先。

5、sticky
粘性定位
元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和 containing block (最近块级祖先 nearest block-level ancestor)，包括table-related元素，基于top, right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。
该值总是创建一个新的层叠上下文（stacking context）。注意，一个sticky元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上（当该祖先的overflow 是 hidden, scroll, auto, 或 overlay时），即便这个祖先不是真的滚动祖先。这个阻止了所有“sticky”行为
元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于viewport来计算元素的偏移量
sticky的注意事项可以参考这篇文章–CSS中容易被忽视的 position属性sticky