一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。

文档流

定义

说定位之前，先来明确文档流的概念。流是浏览器在页面上摆放html元素所用的方法。它的排布顺序为在浏览器中从左到右，从上到下顺序摆放。

脱离文档流

以下这两种情况会使元素脱离文档流：

• 元素设置position，并且position的值为fixed或absolute；
• 元素添加浮动float，并且float的值不为none；

position

position 属性指定一个元素在文档中的定位方式。有五种取值:

• 静态定位static
• 相对定位relative
• 固定定位fixed
• 绝对定位 absolute
• 粘性定位sticky

下面一一介绍这些属性。

1. static

• position的默认值
• 元素按照标准流进行排布，也就是元素默认情况下的定位方式。
• 设置 top、bottom、left 和 right无效。

2. relative

• 元素不会脱离文档流
• 元素相对于其正常位置进行定位。 relative相对于原位置移动，其在原位置占用的位置依旧不变
• 设置 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。

    div.static {
      position: static;
      border: 3px solid #73adff;
      left: 60px;
      width: 90px;
      height: 100px;
    }

    div.relative {
      position: relative;
      border: 3px solid #73adff;
      left: 90px;
      width: 90px;
      height: 100px;
    }

 <div class="static">这个元素设置 position: static;</div>
 <div class="relative">这个元素设置 position: relative;</div>

3. fixed

• 元素会脱离文档流，并不为元素预留空间
• 通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置
• 元素的位置在屏幕滚动时不会改变

4. absolute

• 元素会脱离文档流，并不为元素预留空间
• 元素相对于最近的非 static 定位祖先元素偏移
• 如果一直往上层元素找不到有定位的元素，那么最终的参照对象为视口

    div.fixed {
      position: fixed;
      bottom: 200px;
      left: 30px;
      width: 300px;
      border: 3px solid #73ad21;
    }

    div.absolute {
      position: absolute;
      top: 80px;
      right: 0;
      width: 200px;
      height: 100px;
      border: 3px solid #c70f5c;
    }

  <div class="fixed">
    这个元素设置 position: fixed;
    <div class="absolute">这个元素设置 position: absolute;</div>
  </div>

5. sticky

• 元素根据用户的滚动位置进行定位。
• 根据滚动位置在相对（relative）和固定（fixed）之间切换。开始它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（position:fixed）。

常见应用

子绝父相

子元素的绝对定位都是相对于父元素进行定位的，虽然给父元素的position设置relative、absolute、fixed都可以，但是如果不希望父元素脱离文档流，则采用子绝父相：

• 父元素设置position: relative；
• 子元素设置position: absolute;

举个例子，实现元素水平垂直居中

    .parent {
      position: relative;
      height: 150px;
      width: 200px;
      background-color: coral;
    }

    .son {
      position: absolute;
      top: 50%;
      left: 50%;
      /*定宽高时等同于margin-left:负自身宽度一半;margin-top:负自身高度一半;*/
      transform: translate(-50%, -50%);
      width: 100px;
      height: 50px;
      background-color: aquamarine;
    }

  <div class="parent">
    <div class="son"></div>
  </div>

2. 绝对定位的公式应用

使用绝对定位的元素，会满足以下两个公式：

• 定位参照对象的宽度 = left + right + margin-left + margin-right + 绝对定位元素实际占用宽度；
• 定位参照对象的高度 = top + bottom + margin-top + margin-bottom + 绝对定位元素实际占用高度；

按照这个公式也可实现水平垂直居中，设置top，bottom，right，left都为0，margin为auto即可。

    .parent {
      position: relative;
      height: 150px;
      width: 200px;
      background-color: coral;
    }

    .son {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      width: 100px;
      height: 50px;
      background-color: aquamarine;
    }

3. sticky 一般应用在：网站滚动到一定高度的时候，让一部分内容作为navbar置顶显示。 举个例子：综合排序等一栏

   div.sticky {
      position: sticky;
      top: 40px;
      /*最后会停在top40px的位置*/
    }