CSS Position(定位)

定位 position 用来把元素"钉"在页面的某个位置，配合 top、right、bottom、left 四个偏移属性使用，是制作悬浮导航、弹窗、图标角标等效果的必备知识。

static：默认定位

所有元素默认都是 static，即老老实实按文档流从上到下排列；static 元素会忽略 top/left 等偏移设置，不需要特意声明：

div { position: static; }   /* 默认值，元素按正常文档流排列 */

relative：相对定位

元素先按原位置排好，再用 top/left 等属性相对自己原本的位置做偏移；原位置仍然保留，不会挤动其它元素：

.box {
  position: relative;
  left: 30px;   /* 向右移动 30px */
  top: 10px;    /* 向下移动 10px */
}
/* 效果：盒子向右下偏移，但原本占的位置依然空着 */

absolute：绝对定位

元素脱离文档流，相对最近的已定位祖先（position 不为 static）进行定位；若祖先都没有定位，则相对整个页面定位：

.parent { position: relative; }   /* 给父级加定位，作为参照物 */
.child {
  position: absolute;
  top: 0;
  right: 0;      /* 钉在父级容器的右上角 */
}
/* 效果：角标、徽章类元素常这样挂在父盒子的角落 */

fixed：固定定位

fixed 相对浏览器视口定位，页面滚动时纹丝不动，适合做回到顶部按钮、悬浮菜单：

.back-top {
  position: fixed;
  right: 20px;
  bottom: 20px;   /* 永远贴在视口右下角 */
}
/* 效果：无论页面滚到哪里，按钮都固定在右下角 */

sticky：粘性定位

sticky 是 relative 与 fixed 的结合体：滚动到达阈值前按正常流显示，越过阈值后就被"吸住"在屏幕上：

.nav {
  position: sticky;
  top: 0;    /* 滚动到顶部时，导航条吸附在视口顶端 */
}

z-index 控制层叠顺序

多个定位元素重叠时，z-index 数值大的显示在上层；该属性只对定位元素（relative/absolute/fixed/sticky）生效：

.a { position: absolute; z-index: 1; }
.b { position: absolute; z-index: 10; }   /* b 覆盖在 a 上方 */

小结

position 有五个取值：static 默认流、relative 相对原位微调、absolute 相对定位祖先、fixed 钉住视口、sticky 滚动吸附；配合 z-index 就能精确控制层叠关系，做出各种悬浮与角标组件。