CSS定位详解：相对与绝对定位全解析

文章小白一枚，正在不断学习积累知识，现将学习到的知识记录一下，也是将我的所得分享给大家！而今天这篇文章《CSS定位基础：相对与绝对定位详解》带大家来了解一下##content_title##，希望对大家的知识积累有所帮助，从而弥补自己的不足，助力实战开发！

答案：CSS中position: relative使元素在原位置进行视觉偏移，但仍占据文档流空间，常用于为absolute子元素提供定位基准；而position: absolute使元素脱离文档流，不占空间，相对于最近的已定位祖先元素定位，若无则以初始包含块为基准。两者核心区别在于是否脱离文档流及定位参照物不同，合理使用可实现精准布局，滥用则易导致响应式问题和定位错乱。

CSS的position属性是网页布局的核心，它决定了元素在文档流中的定位方式。其中，relative（相对定位）和absolute（绝对定位）是理解和掌握复杂布局的关键，它们允许元素脱离常规文档流，实现更精细、更自由的定位。

解决方案

谈到CSS布局，position属性无疑是个绕不开的话题，它就像是给元素颁发的一张“通行证”，决定了它在页面上的站位。我们最常打交道的，除了默认的static，就是relative和absolute了。

position: relative，顾名思义，是相对定位。它让元素在保持其原有文档流位置的同时，可以根据top、right、bottom、left属性进行位移。但请注意，它原来的位置仍然被占据着，就好像一个隐形的“占位符”还在那里，所以它不会影响周围元素的布局。这种特性，很多时候我们并不是为了让它自身位移，而是为了让它的子元素能够以它为基准进行absolute定位，这是一个非常常见的用法，也是很多新手容易混淆的地方。

而position: absolute，则是绝对定位。一旦一个元素被设置为absolute，它就彻底“脱离了文档流”，不再占据任何空间，周围的元素会像它不存在一样重新排列。它的定位基准不再是它自身在文档流中的位置，而是其最近的、已定位的祖先元素。这里的“已定位”指的是position值不是static的祖先元素（可以是relative, absolute, fixed, sticky）。如果找不到这样的祖先，它就会以初始包含块（通常是元素）为基准进行定位。这就是为什么有时候你给一个元素设置了absolute，却发现它跑到了页面的某个角落，往往就是因为它的父元素没有被“定位”过。

理解这两者的核心差异，就在于一个“占位”与否，以及“定位基准”的不同。relative是“动而不离其位”，absolute是“彻底脱离，另寻基准”。

CSS position: relative 是如何影响元素自身和周围布局的？

说起来，relative这东西，很多时候我们用它并不是为了它自身的位移，而是为了一个更重要的目的：成为它内部absolute子元素的“定位上下文”。当然，它本身也能实现一些微调。

当一个元素被赋予position: relative;之后，它依然会老老实实地待在文档流中，占据着它原本应该有的空间。这一点非常关键，因为它意味着你就算给它设置了top: 20px; left: 30px;，它也只是视觉上挪动了，而它身边的兄弟元素并不会因此而“填补”它挪动后留下的空隙，也不会因为它的挪动而跟着挪动。它就像一个幽灵，虽然视觉上离开了，但它的“魂魄”还在原地。

比如，我们有一个段落：

<div class="container">
  <p>这是一个正常的段落。</p>
  <p class="relative-box">这个段落被相对定位了。</p>
  <p>这是另一个正常的段落。</p>
</div>

.relative-box {
  position: relative;
  top: 10px;
  left: 20px;
  background-color: lightblue;
  border: 1px solid blue;
}

你会看到.relative-box确实向下、向右移动了，但它前后的段落仍然紧挨着它原本的位置，并没有因为它的位移而改变布局。这在做一些小范围的视觉调整，比如图标与文字的微调，或者在不影响整体布局的前提下，给某个元素增加一点阴影或边框的偏移效果时，会显得非常方便。

然而，它最强大的用途，是为内部的position: absolute元素提供一个定位基准。一旦父元素设置为relative，其内部的absolute子元素就会以这个父元素的左上角为起点进行定位，而不是以或者其他更远的祖先元素。这提供了一种非常灵活且可控的局部定位机制，是我们构建复杂UI，比如下拉菜单、工具提示、图片上的文字覆盖等场景的基石。

深入理解 position: absolute：它如何脱离文档流并找到其定位基准？

position: absolute的元素，可以说是个“自由灵魂”。它一经设置，就彻底挣脱了文档流的束缚，不再占据任何空间。这就像你在一个队伍里，突然隐身了，队伍里的人会立刻往前补位，假装你从未存在过。

那么，它漂浮在空中，要以什么为基准来确定自己的位置呢？这就是absolute最核心的规则：它会寻找最近的、非static定位的祖先元素作为其定位上下文。这个祖先元素可以是relative, absolute, fixed, 或者sticky。

举个例子：

<div class="parent-container">
  <div class="child-absolute">
    我是一个绝对定位的子元素
  </div>
</div>

<div class="another-parent">
  <div class="child-absolute-no-context">
    我找不到定位上下文，会以body为准
  </div>
</div>

.parent-container {
  width: 300px;
  height: 200px;
  background-color: #eee;
  border: 1px solid gray;
  /* 关键：设置为relative，为子元素提供定位上下文 */
  position: relative; 
}

.child-absolute {
  position: absolute;
  top: 20px;
  left: 30px;
  background-color: lightcoral;
  padding: 10px;
}

.another-parent {
  width: 300px;
  height: 200px;
  background-color: #f9f9f9;
  border: 1px solid lightgray;
  /* 默认是static，不会提供定位上下文 */
  /* position: static; */ 
  margin-top: 20px;
}

.child-absolute-no-context {
  position: absolute;
  top: 50px;
  right: 10px;
  background-color: lightgreen;
  padding: 10px;
}

在第一个例子中，.child-absolute会相对于.parent-container的左上角进行定位。因为.parent-container被设置了position: relative。

而在第二个例子中，.another-parent的position是默认的static，它无法为.child-absolute-no-context提供定位上下文。所以，.child-absolute-no-context会继续向上寻找，最终找到（或者更准确地说是“初始包含块”），并相对于它进行定位。这就解释了为什么有时候你的absolute元素会跑到页面顶部或某个你意想不到的位置。

理解这个“定位上下文”的机制是使用absolute的关键。它赋予了元素极大的自由度，但也带来了布局上的挑战，尤其是在响应式设计中，absolute元素的尺寸和位置可能需要更精细的控制，否则很容易出现重叠或错位的问题。同时，z-index属性通常会与absolute（以及fixed、relative）一起使用，来控制元素在垂直方向上的堆叠顺序，谁在上面，谁在下面。

何时选择 relative，何时选择 absolute？实际场景中的最佳实践与常见误区。

选择relative还是absolute，往往取决于你想要达到的效果和对文档流的控制需求。这不是一个非此即彼的简单选择，更多的是一种策略上的权衡。

选择 position: relative 的场景：

1. 微调元素位置： 如果你只是想让一个元素在不影响周围布局的前提下，稍微向上、向下、向左或向右移动一点点，relative是理想选择。比如，一个图标需要和文字对齐，但默认对齐效果不佳，就可以用relative微调。
2. 创建定位上下文： 这是relative最常用的场景。当你需要在一个特定的父元素内部，对某个子元素进行absolute定位时，将父元素设置为position: relative;是必不可少的一步。这使得子元素的absolute定位变得可控，不会“飞”到页面之外。
3. 配合z-index： 虽然z-index可以作用于所有定位元素，但relative元素通过设置z-index，可以改变其与兄弟元素之间的堆叠顺序，而不会影响其在文档流中的位置。

选择 position: absolute 的场景：

1. 覆盖层、模态框、工具提示： 这些元素通常需要浮动在其他内容之上，并且不占据文档流空间。absolute配合top, left, right, bottom可以精确控制它们相对于定位上下文的位置。
2. 图片上的文字或图标： 比如在图片左上角添加一个“新品”标签，或者在视频播放器上放置播放按钮。将图片容器设置为relative，然后内部的标签/按钮设置为absolute，可以轻松实现。
3. 复杂的UI组件： 像下拉菜单、自定义滚动条、或者一些需要精确放置的小部件，absolute能提供所需的灵活性。
4. 脱离文档流的元素： 任何你需要一个元素完全脱离文档流，不影响其他元素布局，并且可以精确控制其位置的场景。

常见误区与最佳实践：

• 滥用 absolute： 新手很容易在布局遇到困难时，直接给元素套上absolute，然后用top/left硬编码位置。这在简单页面可能没问题，但在复杂或响应式页面中，会导致维护噩梦，因为一旦屏幕尺寸变化，这些硬编码的位置很可能就会错乱。
  • 最佳实践： 尽量优先使用Flexbox或Grid布局来处理大部分结构性布局，absolute只用于那些确实需要脱离文档流的特定元素。
• 忘记设置父元素的 position: relative： 这是最常见的错误之一。当absolute子元素没有找到最近的已定位祖先时，它就会向上找到，导致元素“飞”到页面顶部。
  • 最佳实践： 养成习惯，当你在一个父元素内部使用absolute子元素时，立即检查并设置父元素的position为relative（或absolute、fixed）。
• absolute元素与内容溢出： absolute元素不占据空间，如果其内容过多，可能会溢出其定位上下文，或者覆盖其他不相关的元素。
  • 最佳实践： 结合overflow属性，或者使用max-width、max-height来限制absolute元素的大小。必要时，考虑使用JavaScript来动态调整其位置或尺寸。
• 响应式设计中的挑战： absolute元素的top/left等属性通常是固定像素值，这在不同屏幕尺寸下可能表现不佳。
  • 最佳实践： 在响应式设计中，absolute元素的位置和尺寸可能需要通过媒体查询（@media）进行调整，或者使用百分比单位来使其更具弹性。

总而言之，relative和absolute是CSS布局工具箱中两把锋利的刀，用得好能事半功倍，用不好则可能“伤到自己”。关键在于理解它们各自的特性，特别是对文档流的影响以及定位基准的选择，这样才能在实际开发中游刃有余。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《CSS定位详解：相对与绝对定位全解析》文章吧，也可关注golang学习网公众号了解相关技术文章。