相对定位、绝对定位、固定定位

CSS　position定位属性

一、静态定位(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浏览器不支持此属性值。

1. 常规情况下同position:relative一样
2. 在显示不超出其父元素的前提条件下，尽可能与 最近滚动祖先 保持指定的最小距离
3. 使用了 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