CSSposition定位属性

一、静态定位(static)

设置position属性值为static的元素是一个静态定位元素，此值为默认值，即此元素在正常文档流中。

二、相对定位(relative)

设置position属性为relative的元素是一个相对定位元素，其定位的参照物为元素本身（即元素原本的位置进行定位）。

实例

<style>.parent {height: 200px;width: 200px;background-color: #ff9900;/* 让子元素水平垂直居中 */display: flex;flex-direction: row;justify-content: center;align-items: center;}.child {height: 50px;width: 50px;background-color: black;/* 设置相对定位 */position: relative;left: 50px;}</style><div class="parent"><div class="child"></div></div>

相对定位元素会基于元素本身的位置进行定位。可以看一下实例的效果图，黑色方块为子元素，明显向右（设置的是left）偏移了。

三、绝对定位(absolute)

设置position属性为absolute的元素是一个绝对定位元素，其定位的参照物是position属性值不是static的包含块。当块元素设置为绝对元素且不指定宽度时，其宽度会收缩至内容本身大小。

实例

<style>.parent {position: relative;height: 200px;width: 200px;background-color: #ff9900;}.child {position: absolute;right: 0;height: 100px;background-color: black;color: white;}</style><div class="parent"><div class="child">我是一个子元素</div></div>

绝对定位元素（黑色方块）会基于设置了position属性值不是static的包含块（橙色）进行定位。且绝对定位元素的宽度会收缩至元素内容大小。

三、固定定位(fixed)

设置了固定定位的元素，会基于 viewport 窗口进行定位。其实固定定位只是一个包含块为 viewport 窗口的绝对定位。

四、粘性定位（sticky）

sticky是css定位新增属性；MDN上讲粘性定位可以被认为是相对定位和固定定位的混合，常常与滚动进行混用。IE浏览器不支持此属性值。

常规情况下同position:relative一样在显示不超出其父元素的前提条件下，尽可能与 最近滚动祖先 保持指定的最小距离使用了 position:sticky; 的元素会为其子元素创建新的层叠上下文（stacking context）

实例

<style>.parent {width: 200px;margin: 500px auto;height: 600px;background-color: #ff9900;}.child {height: 50px;width: 50px;background-color: black;position: sticky;top: 50px;}</style><div class="parent"><div class="child"></div></div>

可以看到黑色小方块始终是距离顶端大于20px