CSS相对定位和绝对定位的区别

最新推荐文章于 2025-05-12 10:53:06 发布

原创最新推荐文章于 2025-05-12 10:53:06 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #定位

本文深入解析CSS中的相对定位和绝对定位，详细阐述两者的工作原理及区别，帮助读者理解元素如何在页面中定位，以及它们如何影响布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS中相对定位和绝对定位常常会使初入的新人感到困惑，我本人也是深受其害！今天详细的给大家说一下相对定位和绝对定位的区别，也是对自己的一种复习。
一、相对定位 position: relative;
根据w3cschool里的介绍，相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。
#box_relative {
position: relative;
left: 30px;
top: 20px;
}
在这里插入图片描述
也就是说，当开启相对定位时，元素的移动是以自身为基准进行平移，同时自己本身的空间会进行保留，不会被其他元素给占据。而且还会激活z-index属性，其层叠级别高于原本的文档流时将会进行覆盖。
二、绝对定位 position: absolute;
绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
#box_relative {
position: absolute;
left: 30px;
top: 20px;
}

在这里插入图片描述
与相对定位不同的是，绝对定位是相对于自己的父辈元素进行平移，若自己的父辈没有开启相对定位，则元素相对于body转移位置。若自己的父辈全部开启定位，则会对离自己最近的父辈元素进行平移，但是若只开启定位没有进行平移，则会在原来位置脱离文档流。还有一个不同的点是，绝对定位自身的空间会被其他元素占有，同时也会激活z-index属性，其层叠级别高于原本的文档流时将会进行覆盖。