答案：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;
，它也只是视觉上挪动了，而它身边的兄弟元素并不会因此而“填补”它挪动后留下的空隙，也不会因为它的挪动而跟着挪动。它就像一个幽灵，虽然视觉上离开了，但它的“魂魄”还在原地。
比如，我们有一个段落：
这是一个正常的段落。
这个段落被相对定位了。
这是另一个正常的段落。
.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
的元素，可以说是个“自由灵魂”。它一经设置，就彻底挣脱了文档流的束缚，不再占据任何空间。这就像你在一个队伍里，突然隐身了，队伍里的人会立刻往前补位，假装你从未存在过。
Seede AI
AI 驱动的设计工具
586 查看详情
那么，它漂浮在空中，要以什么为基准来确定自己的位置呢？这就是
absolute
最核心的规则：它会寻找最近的、非
static
定位的祖先元素作为其定位上下文。这个祖先元素可以是
relative
,
absolute
,
fixed
, 或者
sticky
。
举个例子：
我是一个绝对定位的子元素我找不到定位上下文，会以body为准
.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
的场景：
微调元素位置： 如果你只是想让一个元素在不影响周围布局的前提下，稍微向上、向下、向左或向右移动一点点，
relative
是理想选择。比如，一个图标需要和文字对齐，但默认对齐效果不佳，就可以用
relative
微调。创建定位上下文： 这是
relative
最常用的场景。当你需要在一个特定的父元素内部，对某个子元素进行
absolute
定位时，将父元素设置为
position: relative;
是必不可少的一步。这使得子元素的
absolute
定位变得可控，不会“飞”到页面之外。配合
z-index
： 虽然
z-index
可以作用于所有定位元素，但
relative
元素通过设置
z-index
，可以改变其与兄弟元素之间的堆叠顺序，而不会影响其在文档流中的位置。
选择
position: absolute
的场景：
覆盖层、模态框、工具提示： 这些元素通常需要浮动在其他内容之上，并且不占据文档流空间。
absolute
配合
top
,
left
,
right
,
bottom
可以精确控制它们相对于定位上下文的位置。图片上的文字或图标： 比如在图片左上角添加一个“新品”标签，或者在视频播放器上放置播放按钮。将图片容器设置为
relative
，然后内部的标签/按钮设置为
absolute
，可以轻松实现。复杂的UI组件： 像下拉菜单、自定义滚动条、或者一些需要精确放置的小部件，
absolute
能提供所需的灵活性。脱离文档流的元素： 任何你需要一个元素完全脱离文档流，不影响其他元素布局，并且可以精确控制其位置的场景。
常见误区与最佳实践：
滥用
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布局工具箱中两把锋利的刀，用得好能事半功倍，用不好则可能“伤到自己”。关键在于理解它们各自的特性，特别是对文档流的影响以及定位基准的选择，这样才能在实际开发中游刃有余。
以上就是cssposition属性基础及相对定位与绝对定位的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1065915.html
微信扫一扫 
支付宝扫一扫 
