CSS 定位

position 五种值

定位用来控制元素站在哪，position 属性一共五个值，先看整体对比。

脱离文档流的意思是，元素原来占的位置没了，后面的元素会上来补位，这一点和浮动一样。

relative 相对自身偏移

relative 保留原来的位置，用 top、right、bottom、left 相对自身偏移，偏移后原位置仍被占用，不影响其他元素。它常用于小图标、标签的微调。

.icon {
  position: relative;
  top: 3px;      /* 向下挪 3px */
}

absolute 绝对定位

absolute 脱离文档流，相对最近的定位祖先定位。定位祖先怎么理解，就是往上逐层找，遇到的第一个 position 不是 static 的祖先元素，它就是参照物。一路都找不到，就相对视口定位。

<style>
  .card {
    position: relative;    /* 当定位祖先 */
    width: 240px;
    height: 160px;
    background: #f1f1f1;
  }
  .tag {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #e74c3c;
    color: #fff;
    font-size: 12px;
    padding: 2px 8px;
  }
</style>
<div class="card">
  <span class="tag">推荐</span>
</div>

这里 .card 设了 relative，.tag 的 top、right 就相对卡片计算，角标永远跟着卡片走。父元素忘加 relative 是最常见的错，一忘，子元素就飞到视口角落去了。

fixed 固定定位

fixed 相对视口定位，页面滚动时它不动，经典场景是回到顶部按钮。

<style>
  .back-top {
    position: fixed;
    right: 20px;
    bottom: 40px;
    width: 44px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    background: #3498db;
    color: #fff;
    text-decoration: none;
    border-radius: 50%;
  }
</style>
<a class="back-top" href="#">↑</a>

sticky 粘性定位

sticky 是后来加入的，它先按普通文档流排列，滚动到 top 指定的阈值后粘在屏幕上不动。限制是只在父容器范围内生效，出了父容器它跟着一起走。经典场景是吸顶导航。

.nav {
  position: sticky;
  top: 0;      /* 滚到顶部时粘住 */
}

注意 sticky 需要一个能滚动的祖先，而且父容器的高度要大于它自己，否则还没粘住就到底了。

z-index 层叠顺序

定位元素叠在一起时，谁在上面由 z-index 决定，数值越大越靠上。只有定位元素才参与这个游戏，普通文档流里的元素设置 z-index 无效。

重点提醒两点。一是 z-index 与选择器优先级无关，内联样式、类选择器再猛，也比不过数值大的 z-index，二是数值相同时，HTML 里后写的元素在上层。

.a {
  position: absolute;
  z-index: 2;
}
.b {
  position: absolute;
  z-index: 1;    /* b 在 a 的下面 */
}

小结

五种定位值参照物各不同，记不住就翻前面的表格。absolute 记得给父元素加定位祖先，z-index 只对定位元素生效。定位擅长做角标、吸顶、悬浮这类小效果，整页布局还是后面 Flexbox 和 Grid 的活。