为什么你的 absolute总是乱跑？聊聊 Relative、Absolute 和 Fixed 的爱恨情仇

如果你是刚接触前端的新手，有没有试过被position：absolute乱跑苦恼过呢？明明只想让一个小标签贴在卡片的右上角，结果它像脱缰的野马一样，跑到页面的右上角去了；或者你滚动页面，它却像粘在屏幕上一样死活不下来。

这不是 Bug，而是你没看懂这三个定位属性之间的权力游戏。

今天，我们不背文档，只讲故事。把这三位（Relative,Absolute,Fixed）的关系彻底了解。

一、relative（相对定位）

优点：脱离文档流，原位置空出，其他元素当它不存在；

position: relative是 absolute 的“爹”（参照物），它的核心使命就是给 absolute 当参考系。

看起来最老实，平时就像个static（默认布局）一样待在原地，占着坑位不挪窝。

.card { width: 300px; height: 200px; background-color: #ff6b6b; border-radius: 10px; padding: 20px; color: white; font-size: 18px; margin-bottom: 600px; /* 留出滚动空间 */ position: relative; /* 提示：使用相对定位 */ }

二、absolute（绝对定位）

优点：不占空间，可以层叠在其他元素之上，非常适合做覆盖层、遮罩层。可以精确地定位到父容器的任意角落（如右上角）

.tag { width: 80px; height: 30px; background-color: #4dabf7; border-radius: 5px; font-size: 14px; text-align: center; line-height: 30px; position: absolute; top: 0px; right:0px; opacity: 1; }

三、fixed(固定定位）

相对于浏览器视口​ 进行定位，覆盖其他元素，即使页面滚动，它也会停留在同一位置；

优点：有稳定性，常用于悬浮按钮、返回顶部、固定导航栏；

它就像电影院座椅背后的“固定小桌板”。

.back-btn { width: 50px; height: 50px; background-color: #51cf66; border-radius: 50%; text-align: center; line-height: 50px; color: white; font-weight: bold; cursor: pointer; position: fixed; left: 500px; /* 距离窗口左侧500px */ top: 650px; /* 距离窗口顶部650px */ /* 提示：使用固定定位 */ }

说到底，relative、absolute和fixed就像是一个关于“原生家庭”的故事。

relative 是那个默默付出的家长，fixed 是那个一心只想逃离原生家庭的叛逆少年，而 absolute.....就是一个一旦没人管，就敢把天捅破的熊孩子。

下次当你发现你的布局乱成一锅粥时，别急着改像素，先看看是不是absolute又离家出走了