理解定位的基本概念
前端布局绕不开的核心就是 CSS 的 position 属性。它就像控制元素在页面上“坐哪儿”的遥控器，决定了元素在文档流中的行为，也决定了它与其他元素之间的空间关系。想精准控制元素位置？无论是制作悬浮导航栏，还是实现覆盖层模态框，理解 position 的几种取值，都是 CSS 入门到进阶的基本功。
这里有个关键点：position 不是单打独斗的。它通常会跟 top、right、bottom、left 这四个偏移属性配合使用——这几个属性决定了元素在“定位上下文”中的落脚点。所谓的“定位上下文”，说白了就是元素的定位参照系，而参照系是什么，要看 position 的具体值。从默认的静态定位，到完全脱离文档流的绝对定位，每种模式都有自己的用武之地，也自带坑点。
静态定位与相对定位
position 的默认值是 static，也就是静态定位。处在静态定位下的元素，会老老实实遵循正常的文档流布局。这时你给元素写 top、right 之类的偏移属性？不好意思，完全无效，连 z-index 也不会搭理它。可以把它看作是页面上的“老实人”，按照 HTML 的结构和盒模型规则，一个接一个地排列。大部分时候，我们甚至不需要特意声明 position: static——不过它确实是一切定位变化的起点。
当你把 position 改成 relative，元素就进入相对定位模式。这时候，元素先占据它在正常文档流中的原始位置（位置空间还在），然后你可以用偏移属性，让它相对于这个“原地”挪动。有意思的是，这种挪动并不会影响其他元素——其他元素会表现得好像它还在原地一样。相对定位是个好东西，适合微调元素位置，也常给绝对定位的子元素当“定位容器”。一句话：给父元素加一个 position: relative（不设偏移）， 里面的绝对定位子元素就会以这个父元素的边界为参照，这比依赖外层或视口要靠谱得多。
绝对定位的威力与约束
absolute（绝对定位）是个强力角色。元素一旦进入绝对定位，就会被从文档流里彻底移除——原先占的空间会闭合，后面的元素立马把它补上。绝对定位元素的位置，取决于它最近的、设置了非 static 定位的祖先元素（也就是“定位容器”）。如果一路向上都找不到这样的祖先，那就拿初始包含块（一般是视口或 html 元素）当参照。
绝对定位的魅力在于，它能让你把元素钉在页面上任意一个精确位置，非常适合弹出菜单、工具提示、图标角标这类“盖在其他内容上方”的组件。不过，威力越大，麻烦也越多。因为脱离了文档流，父容器不再计算它的高度，布局塌陷是常有的事。更要命的是，它的定位稳定性高度依赖定位容器的稳定性——容器一缩放或挪位，绝对定位元素很可能就跟着跑偏了。所以，用绝对定位之前，一定得把定位容器的定位方式设计清楚。
固定定位与粘性定位
fixed（固定定位）和绝对定位有点像，元素也会脱离文档流。但它的定位容器始终是视口（viewport）。这意味着不管你怎么滚动页面，固定定位的元素都会“粘”在浏览器窗口的指定位置。想搞固定页头、页脚或侧边栏广告？固定定位是首选。不过在移动端开发，这里有个坑：有些浏览器对底部固定定位元素有特殊处理，而且键盘弹出时，视口高度会变，定位逻辑也可能跟着跑偏，需要特别留心。
再来看看 sticky（粘性定位），它可以说是相对定位和固定定位的混合体。元素的定位行为有一个“阈值”：在跨过这个阈值之前，它按相对定位对待；跨过去之后，就变成固定定位。这个“阈值”一般用 top、right 等偏移属性来定义。举个例子：设一个 top: 10px，当滚动页面让元素离视口顶部不足10px时，它就会“粘”在距离顶部10px的位置，直到它的父元素彻底滚出视口。这个特性非常适合做滚动时吸顶的表格标题或导航栏，比纯 JavaScript 实现更省性能、更少bug。不过注意：父容器不能设 overflow: hidden 这类限制，否则粘性效果直接失效。
实践中的常见问题与解决方案
在实际项目中，很少只用一种定位方式就能搞定所有问题。更常见的做法是灵活组合。最经典的模式就是“父相子绝”：父元素设 position: relative 但不设偏移值，里面的子元素用绝对定位去飞。这样既给子元素一个稳定可控的定位容器，又避免布局失控。
层叠顺序（z-index）管理也是一门必修课。多个定位元素重叠时，z-index 决定谁在上谁在下。注意：z-index 只对非 static 的定位元素生效，而且堆叠上下文是由父元素的某些属性创建的（比如 opacity 小于1或 transform）。z-index 设得不合理，元素可能莫名其妙被挡住。最佳做法是把 z-index 值控制在可管理范围内——比如在一套系统里定义几个层级常量，别再随手写个9999了。
最后，千万别忘了响应式。绝对定位里写固定像素偏移，在大屏和小屏上的表现可能是天壤之别。配合百分比、视口单位（vw、vh），或者通过媒体查询调整定位策略，才能确保布局在不同设备上既好看又好用。说到底，定位只是达成布局目标的一种手段，不是唯一手段。现代 CSS 的 Flexbox 和 Grid 布局，在解决很多传统定位难题上，已经给出了更优雅的方案。
