position定位有哪些值？有什么区别？

搞了这么多年前端，position这个属性绝对是CSS布局里的老伙计了。它就像给元素发了个定位指令，告诉浏览器这玩意儿该呆在哪儿。常用的值有五个：static、relative、absolute、fixed，还有后来加入的sticky。每个值都有自个儿的脾气，用对了事半功倍，用错了就得头疼调试。

static是默认值，意思就是“别折腾，老老实实按文档流呆着”。你设了top、left这些偏移属性对它也没用，它根本不吃这套。大部分元素默认都是这个状态，所以咱们平时改定位，第一件事就是先把它换成别的值。

relative相对定位就有意思了。它先让元素呆在文档流里原本的位置，然后你可以用top、right这些属性让它从那个位置“挪一挪”。关键是，它原来的地盘还占着，不会影响其他元素布局。这就像你在停车场占了车位，然后下车溜达几步，车位还给你留着。

.box {
  position: relative;
  top: 10px;
  left: 20px;
}

absolute绝对定位可就“六亲不认”了。它会完全脱离文档流，不占原来的地方。然后它相对于最近一个不是static定位的祖先元素来定位。如果找不着这样的祖宗，那就一路找到body。这东西特别适合做弹出层、下拉菜单这些需要精确堆叠的组件。

.parent {
  position: relative; /* 给absolute孩子当参照物 */
}
.child {
  position: absolute;
  top: 0;
  right: 0;
}

fixed固定定位和absolute有点像，也是脱离文档流，但它认的参照物是浏览器视口。你滚动页面，它就跟粘在屏幕上似的，一动不动。做固定导航栏或者悬浮按钮的时候，它就是首选。

.nav {
  position: fixed;
  top: 0;
  width: 100%;
}

sticky粘性定位算是个混合体。元素一开始老老实实呆在文档流里，等滚动到某个阈值（比如离视口顶部10px），它就“粘”在那儿变成fixed定位了。这玩意儿实现滚动时标题栏吸顶效果特别方便。

.header {
  position: sticky;
  top: 0;
}

所以区别在哪？核心就两点：一是它参照谁定位（文档流、祖先元素还是视口），二是它原来的空间还占不占。static和relative不脱离流，absolute和fixed完全脱离，sticky则是有条件脱离。实际开发中，我经常用relative给absolute孩子当坐标原点，用fixed做全局固定元素，sticky处理滚动吸顶。脑子里清楚它们各自的参照系，布局就不容易乱。