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

如果你是刚接触前端的新手有没有试过被positionabsolute乱跑苦恼过呢明明只想让一个小标签贴在卡片的右上角结果它像脱缰的野马一样跑到页面的右上角去了或者你滚动页面它却像粘在屏幕上一样死活不下来。这不是 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又离家出走了