一、绝对定位（position: absolute）的特点
在CSS中，绝对定位是指将元素从文档流中拖出来，并根据其最近的非static（默认定位方式）定位的祖先元素（或者是元素）进行定位。
具体来说，当一个元素的position属性为absolute时，它的位置是相对于最近的position属性不为static的祖先元素的，而不是相对于当前元素在文档流中原本应该出现的位置。如果不存在非static祖先元素，则相对于文档的初始包含块（initial containing block）进行定位。
使用绝对定位能够让开发者更好地控制元素的布局，可以使元素脱离文档流，更好地进行定位、层叠操作等。
二、相对定位（position: relative）的特点
相对定位是指将元素相对于其在文档流中的原本位置进行定位，在文档流中仍保留该元素在原本位置的空间。相对定位不会影响元素的层叠级别，若与其他元素重叠，仍按照文档流中的次序进行渲染。
相对定位本身不会使元素脱离文档流，可以通过top、bottom、left、right等属性来控制元素相对于原本位置的偏移量和方向。相对定位的元素可以设置z-index属性来改变层叠顺序，但其不同于绝对定位可设置的层叠上下文（stacking context）。
三、两种定位方式的区别与联系
相对定位和绝对定位的使用场景和效果不同，但是二者也存在联系和相互影响之处。
相对定位可以被视为一种“局部绝对定位”，即相对于原显示位置为基础，以top、bottom、left、right为基准进行定位。相对定位的元素并未被完全脱离文档流，仍占据文档流原本的位置，但其偏移量可以通过绝对定位来进行微调。相对定位给与了绝对定位更好的参照框架，而绝对定位则弥补了相对定位无法脱离文档流和层叠顺序受限的不足。
四、实例展示
下面是一个简单的例子，通过使用相对定位和绝对定位两个属性，使得两个元素可以层叠显示和定位到正确的位置：
<div style="position: relative" id="outer">
<div style="position: absolute; left: 50px; top: 50px;">Hello</div>
<div style="position: relative; top: 20px;">world</div>
</div>
在上述代码中，我们将一个父元素设置为相对定位，并在其内部放置了两个子元素。其中一个子元素（即第一个<div>元素）设置为绝对定位，其位置相对于父元素左上角向右偏移50px和向下偏移50px的位置。另一个子元素（即第二个<div>元素）相对于原始位置向下偏移了20px的距离。