随着互联网技术的发展，网页布局设计越来越复杂，CSS定位技术成为了网页设计者不可或缺的技能之一。今天我们就来聊聊HTML中两种重要的定位方式：绝对定位和相对定位。这两种定位方式就像地图上的两个导航点，帮助我们更精准地放置网页元素。

首先，让我们了解一下相对定位relative。相对定位就像是你在一张纸上标记了一个位置，这个位置会相对于它原本的位置进行移动。使用relative定位的元素，它的原始位置仍然会被浏览器保留，即使它被移动了。这就像你在书架上移动一本书，但书架上的空间仍然保留着这本书原来的位置。你可以通过top、bottom、left和right属性来指定元素相对于其正常位置的偏移量。例如，如果你设置`position: relative; left: 20px; top: 10px;`，元素就会向右移动20像素，向下移动10像素。

接下来是绝对定位absolute。这种定位方式更像是你在一个完全空白的空间里自由选择一个位置。绝对定位的元素脱离了正常的文档流，它的位置是相对于最近的已定位（非static）祖先元素来计算的。如果没有这样的祖先元素，那么它将相对于初始包含块（通常是浏览器窗口）来定位。这就像是在一张白纸上任意选择一个位置放置你的物品，与周围环境无关。同样，你可以通过top、bottom、left和right属性来确定元素的具体位置。