持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第1天，点击查看活动详情
最近在做需求使用到CSS的positon的时候，发现了一些以前没有注意到的细节。
定位
CSS的定位，除了常规的文档流以外，还可以使用position属性来指定元素在文档中的定位方式，以及相关联的属性top、bottom、left、right设置最终的定位，z-index设置堆叠上下文(stacking context)。
属性介绍
由于关联属性top、bottom、left、right和z-index的生效规则与position的取值相关，以下主要就position属性进行开展。
position: static
static 是position的默认值，元素保持在文档流内，相关的属性top、bottom、left、right、z-index都不生效。
position: relative
元素的定位以元素正常文档流位置为基准，根据top、bottom、left、right的值进行偏移。同时，元素保留初始文档流的占位，其它元素的定位也不会发生改变。当z-index不为auto时，会创建一个堆叠层。
position: absolute
元素脱离正常文档流，以距离元素最近的、非static定位的祖先元素（如果没有则是html标签）为基准，根据top、bottom、left、right的值决定其距离该祖先元素上下左右的边距。
position: fixed
元素脱离正常文档流，以视区所创建的html标签或者以有transform、perspective、filter的非none值定义的祖先元素为基准，实际定位根据top、bottom、left、right的值决定其距离html标签或该祖先元素上下左右的边距。另外，这个元素会被创建一个新的堆叠层，页面滚动的时候元素位置不会变化。
position: sticky
元素先以原来所处的正常文档流位置进行定位，再根据top、bottom、left、right的值决定其无论静止还是滚动时，距离与它最近的有滚动相关属性定义祖先元素的上下左右边距的最小值。这意味着如果处在正常文档流的位置距离边距大于定位的值，则保持原有的位置；否则以最小边距进行定位。即使没有设置z-index，也会创建一个堆叠层。
注意
- 如果没有声明任一
top、bottom、left、right的值，那么position: sticky的声明也不生效。 - 如果定位属性有冲突（如有滚动相关属性定义祖先元素宽度200px，元素宽度50px，设定
left: 100px; right: 100px;，那么以left声明为准；类似的，top、bottom冲突的话，以top声明为准。 - 由于元素没有脱离正常文档流，所以定位范围会受父元素限制（如果父元素的高宽只能容纳该元素，则看起来跟static无异。
- 同样因为元素没有脱离正常文档流，滚动时也会跟随父元素离开视口。
