一、从原理到区别：彻底搞懂相对定位与绝对定位
要用好定位，得先明白它们“站在哪里”和“怎么移动”。咱们先从最基础的原理说起。
相对定位（position: relative）就像你站在队伍里，脚可以前后左右挪，但身体还在原来的位置——元素移动后，原来占的地方不会空出来，后面的元素会“看到”它还在那儿，继续按原来的顺序排列。比如你在段落里放一个
绝对定位（position: absolute）则完全不同，它像你直接从队伍里走出来，站到旁边——元素会脱离文档流，原来的位置彻底空出来，后面的元素会直接“填”进去。比如同样是那个div，改成position: absolute后，它移动后原来的位置会被后面的文字占据，就像这个div从没存在过一样。去年做那个生鲜电商的商品卡片时，我想让“限时秒杀”标签浮在图片右上角，一开始直接用absolute，结果标签跑到整个页面右上角去了，后来才发现问题出在“它要找一个‘靠山’”——绝对定位的元素不会随便乱跑，它会找最近的、设置了position（且不是static）的父元素当“靠山”，如果找不到，就会以整个页面（或html元素）为基准。这就是为什么W3C的CSS规范里特意提到：“absolute定位元素的包含块是最近的position值不为static的祖先元素”（参考链接：https://www.w3.org/TR/CSS2/visuren.html#absolute-positioning" rel="nofollow"），找不到这个“靠山”，它可不就乱跑嘛。
那两者的核心区别到底在哪？我 了三个关键点，你记好这几点，基本不会混淆：
第一，基准不同：relative是“以自己为基准”，移动时参考的是元素本身原来的位置；absolute是“以别人为基准”，参考的是最近的已定位父元素（如果没有就是页面）。
第二，是否占位：relative移动后“原位置保留”，会影响后面元素的排列；absolute移动后“原位置不保留”，后面元素会直接占它的位置。
第三，用途不同：relative适合“微调位置”，比如让标题文字往下挪2px对齐图片，或者给absolute元素当“靠山”；absolute适合“精准固定位置”，比如悬浮按钮、弹窗、标签等需要脱离正常流的元素。
这里有个常见误区得提醒你：很多人以为relative没用，其实它最大的作用是给absolute当“爸爸”——也就是咱们常说的“子绝父相”。去年那个生鲜电商的商品卡片，后来我给卡片容器（父元素）加了position: relative，再给“限时秒杀”标签（子元素）加position: absolute; top: 5px; right: 5px;，标签立马老老实实地待在图片右上角，不管屏幕怎么变都不乱跑。所以你用absolute时，先看看父元素有没有设置position（relative、absolute、fixed都行，就是不能是默认的static），这一步忘了，后面怎么调偏移量都白费功夫。
二、实战技巧+案例：从避坑到精通定位布局
光懂原理还不够，实际用的时候坑可不少。我整理了3个最实用的技巧和案例，都是我踩过的坑、 的经验，跟着做，你也能轻松搞定复杂布局。
刚才提到“子绝父相”，这可是 absolute 定位的“黄金法则”。简单说就是：给需要绝对定位的子元素（position: absolute）找一个父元素，给父元素设置 position: relative（或其他非static值），让子元素以父元素为基准定位。为什么要这样？因为如果父元素是默认的static，子元素会一直往上找，直到找到body或html元素，这时候只要页面一滚动，子元素就可能“飞”出可视区。
举个例子，你做导航栏时，下拉菜单通常要在鼠标 hover 时显示在导航项下方。这时候就可以给导航项（li）设置 relative，给下拉菜单（ul）设置 absolute，再用 top: 100%（相对于父元素高度的100%，也就是正下方）、left: 0 固定位置。代码大概是这样：
.nav-item { position: relative; } / 父元素：导航项 /
.dropdown-menu {
position: absolute;
top: 100%; / 距离父元素顶部100%，正好在下方 /
left: 0; / 左对齐父元素 /
display: none; / 默认隐藏 /
}
.nav-item:hover .dropdown-menu { display: block; } / hover时显示 /
我去年给一个教育机构做官网导航时，一开始没给父元素加relative，结果下拉菜单总跑到页面最左边，后来加上这句position: relative，菜单立马“粘”在导航项下面，怎么滚动都稳如老狗。
哪怕懂了原理，实操时还是会踩坑。我 了3个新手高频错误，你对照着检查，能少走很多弯路：
第一个坑：用relative做整体布局。有人觉得relative简单，就用它来排列多个元素，结果元素移动后原位置留空，页面出现大片空白。记住，relative更适合“微调”，比如单个按钮、图标位置的小偏移，大面积布局还是得靠flex或grid。
第二个坑：绝对定位元素不设宽高。absolute元素脱离文档流后，默认宽度会“收缩”到内容宽度，如果你没设置width和height，可能图片显示不全、文字换行乱掉。我之前给一个美食博客做食谱卡片，用absolute放烹饪时间标签，没设宽度，结果“30分钟”变成两行，后来加了width: 60px才正常显示——这就是血的教训。
第三个坑：忽略z-index层级问题。多个绝对定位元素叠加时，后写的元素会盖住先写的，如果想调整顺序，要给元素加z-index，值越大越靠上。但注意，z-index只对“已定位元素”（position不是static）生效，别给static元素加了半天没反应。
最后咱们用3个案例巩固一下，从简单到复杂，你跟着敲一遍，保证印象深刻。
案例1：图片悬浮标签（适合商品卡片、文章封面）
需求：在图片右上角显示“热门”标签，标签要固定在图片角落，不随页面滚动跑偏。
做法：给图片容器（div）设relative，标签（span）设absolute，top: 5px; right: 5px。
检查点：用浏览器F12打开开发者工具，在Elements面板选中标签，看Computed里的position是不是absolute，父容器的position是不是relative——这是验证定位是否正确的最快方法。
案例2：滚动时固定的导航栏（适合长页面）
需求：页面往下滚时，导航栏固定在顶部；往上滚回顶部时，导航栏恢复原位。
做法：先给导航栏设relative，默认在文档流中；用JS监听滚动事件，当滚动距离>100px时，给导航栏加position: fixed; top: 0; left: 0; width: 100%（fixed是absolute的“近亲”，以视口为基准），同时给body加padding-top等于导航栏高度，避免内容被导航栏盖住。这个方法我去年帮一个旅游博客做攻略页面时用过，现在他们的导航栏在手机上滚动时也稳稳的，用户反馈“找分类方便多了”。
案例3：多元素层叠布局（适合弹窗、提示框）
需求：点击按钮弹出提示框，提示框要盖住页面内容，且有半透明背景。
做法：背景遮罩（div）设fixed占满屏幕，z-index: 100；提示框（div）设absolute，z-index: 101（比遮罩大，确保在上面），父元素设relative让提示框居中。这里要注意，遮罩的z-index必须比页面其他内容大，不然遮不住——我之前做弹窗时就因为遮罩z-index设小了，结果被轮播图盖住，后来把值改成999才解决。
其实定位没那么难，关键是记住“基准在哪”“是否占位”这两个核心点。下次用定位时，先问自己：这个元素要相对于谁动？需不需要保留原来的位置？想清楚这两个问题，大部分布局问题都能迎刃而解。如果你之前也被定位坑过，或者有其他好用的小技巧，欢迎在评论区分享，咱们一起把布局玩明白！
你肯定遇到过这种情况：想让弹窗在屏幕中间显示，用了absolute结果不是偏左就是偏右，调半天都对不齐。其实绝对定位居中一点都不难，我之前帮朋友调登录弹窗时就踩过坑，后来摸出两个超好用的方法，今天手把手教你。
先说第一个“万能法”——left+transform组合，不管元素多宽多高都能用。你给元素加一句left: 50%; transform: translateX(-50%);，它就会水平居中；要是想垂直居中，就再加top: 50%; transform: translateY(-50%);，要是想又水平又垂直，直接transform: translate(-50%, -50%);。为啥这么灵？因为left: 50%是让元素左边框对齐父元素的中线，这时候元素整体还偏右半个宽度，而transform: translateX(-50%)就是把元素往左拉自身宽度的一半，正好让中心点对齐父元素中线。我上次给一个摄影网站做图片查看器弹窗，弹窗宽度会根据图片自动变，用这个方法不管图片多宽都能稳稳居中，朋友还说“比我之前用JS算位置靠谱多了”。
再说说第二个“精准法”——margin负值，适合你知道元素宽度的时候。比如你要居中一个200px宽的按钮，就给它加left: 50%; margin-left: -100px;，垂直居中同理，top: 50%; margin-top: -按钮高度的一半;。这里的关键是“负值要等于宽度的一半”，200px宽就用-100px，150px宽就用-75px，算准了就能严丝合缝居中。不过这个方法有个小缺点，要是元素宽度会变（比如文字多少影响宽度），居中就会跑偏，所以固定宽度的元素用它最合适。我之前做电商的“加入购物车成功”提示框，宽度固定300px，用margin-left: -150px，在各种手机上都没偏过，比调来调去的margin: 0 auto好用多了。
对了，不管用哪种方法，都得记住“父元素要定位”——就是给弹窗的父盒子加position: relative;，不然absolute元素会以页面为基准，你在小屏幕上居中，大屏幕打开可能就偏到天边去了。上次帮朋友调弹窗时，我光设了left和transform，结果父元素没加relative，弹窗在笔记本上居中，到他的27寸显示器上就跑到左边去了，后来加上父元素定位才稳住，这点千万别忘了。
相对定位和绝对定位的主要区别是什么？
主要区别有三点：一是基准不同，相对定位以元素自身原位置为基准偏移，绝对定位以最近的已定位父元素（若无则以页面）为基准；二是文档流影响不同，相对定位不脱离文档流，原位置保留占位，绝对定位完全脱离文档流，原位置会被后续元素占据；三是用途不同，相对定位适合微调元素位置（如对齐调整），绝对定位适合实现悬浮效果、层叠布局（如标签、弹窗）。
为什么绝对定位的元素会跑到页面角落？
这是因为绝对定位元素需要“找靠山”——即相对于最近的已定位父元素（position值不为static）定位。若父元素未设置position（默认static），元素会逐级向上查找，最终以页面（或html元素）为基准，导致“跑到角落”。解决方法是采用“子绝父相”：给父元素设置position: relative，让绝对定位的子元素以父元素为基准，避免跑偏。
相对定位会脱离文档流吗？
不会。相对定位（position: relative）是“原地偏移”，元素移动后仍保留原位置的占位空间，后续元素会按原文档流顺序排列，不会填补其“移动后的空缺”。例如用relative调整图片位置后，图片下方的文字不会向上移动，这是它与绝对定位（脱离文档流）的核心区别之一。
什么时候适合用相对定位，什么时候适合用绝对定位？
根据场景选择：当需要微调元素位置（如文字与图标对齐、元素小幅度偏移）且不想影响其他元素布局时，用相对定位；当需要实现悬浮效果（如商品标签、弹窗提示）、层叠布局（如多元素重叠）或脱离正常流独立定位时，用绝对定位。例如导航栏的下拉菜单常用“子绝父相”（父元素relative+子菜单absolute），既保证菜单悬浮显示，又不影响导航栏整体布局。
绝对定位的元素如何实现居中显示？
常用两种方法：一是“left+transform”，给元素设置left: 50%; transform: translateX(-50%);（水平居中），top: 50%; transform: translateY(-50%);（垂直居中），这种方法无需知道元素宽度；二是“margin负值”，已知元素宽度时，设置left: 50%; margin-left: -元素宽度的一半;（水平居中），同理可实现垂直居中。两种方法都需确保父元素已设置position（非static），作为定位基准。
