1. CSS相对定位和绝对定位的介绍
在前端开发中，CSS（层叠样式表）起到了重要的作用，它可以为HTML元素添加各种各样的样式，以美化页面的展现效果。CSS的定位功能也是其中重要的一部分，它可以为页面元素的定位提供精确的控制，便于我们将元素放置在预定的位置，并进行需求的操作。在CSS定位中，相对定位和绝对定位是两种常用的方式。
相对定位是相对于元素的初始位置进行调整，根据设置的偏移量改变元素的位置。相对定位不会脱离文档流，仍然占据原有的文档空间。
绝对定位是相对于定位父元素（默认是body元素）进行的定位，会脱离文档流，不再占据原有的文档空间。绝对定位元素的布局不受其他元素影响，但它会影响其他元素的位置和布局。
2. CSS元素的默认定位
CSS中，每个元素都有其默认的定位方式：在文档流中平稳地显示。以下是一个展示 HTML 元素默认定位方式的 CSS 代码示例。
/* 设置所有 HTML 元素的默认定位方式 */
* {
position: static;
}
在以上的代码中，我们使用了星号选择器（ * ），它会匹配所有 HTML 元素。在这里，我们将所有元素的默认定位方式设置为 static。
3. 相对定位的实现方式
相对定位可以通过设置元素的 position 属性为 relative 来实现，同时还需要设置偏移量 top、right、bottom、left 来调整元素的位置。偏移量的单位可以使用 px、em、rem 或百分比等。
/* 设置元素的相对定位 */
.relative {
position: relative;
top: 10px;
left: 20px;
}
在以上代码中，我们为一个类名为 relative 的元素设置了相对定位，同时设置了 top 和 left 偏移量。
4. 绝对定位的实现方式
绝对定位通过设置元素的 position 属性为 absolute 来实现，同时需要为其设置一个定位父元素，并通过设置偏移量来调整元素的位置。
定位父元素可以通过设置该元素的 position 属性为 relative 或 absolute 来实现。它是控制绝对定位元素定位基准点的元素。
/* 设置定位父元素的相对定位 */
.parent {
position: relative;
}
/* 设置绝对定位元素 */
.absolute {
position: absolute;
top: 10%;
left: 20%;
}
在以上代码中，我们将一个父元素设置为相对定位，并将一个类名为 absolute 的元素设置为绝对定位。由于没有设置定位基准点，我们的绝对定位元素将相对于文档的左上角进行定位。
5. 相对定位和绝对定位的关系
相对定位和绝对定位是相互依存的。对于一个绝对定位元素，其定位父元素必须为相对或绝对定位。如果缺少定位父元素，该元素将相对于文档根元素进行定位。
相对定位或绝对定位的元素都可以在同一个文档流中共存。相对定位的元素不会脱离文档流，而绝对定位的元素会脱离文档流，因此绝对定位元素不会影响相对定位元素的布局。
在CSS中，绝对定位元素的 z-index 值最大，因此，它会显示在所有其他元素的上面。如果两个绝对定位元素相互重叠，具有较高 z-index 值的元素将位于另一个元素的前面。
6. 总结
相对定位和绝对定位在前端开发中是常用的定位方式之一。相对定位可以相对于元素的初始位置进行调整，而绝对定位则是相对于定位父元素进行的定位，脱离文档流。
在使用相对定位和绝对定位时，需要注意使用偏移量来调整元素的位置，同时要注意定位父元素的设置。相对定位和绝对定位是相互依存的，需要根据实际情况来选择使用。