深入理解CSS中position:relative与position:absolute的使用技巧

在模仿设计一个在线商城页面的过程中，我对CSS中的position:relative和position:absolute的使用技巧和常见问题进行了深入探讨，以下是基于CSDN博主onizukayao的观点整理的心得：

1. 首先，了解基本定义：

- position: absolute; 表示元素的位置相对于最近的已定位（非static）的祖先元素，若无这样的祖先，则相对于初始包含块（通常是HTML元素）。

- position: relative; 则表示元素相对于其正常位置进行定位，即元素原本在文档流中的位置会被保留，而元素本身则按照指定的偏移量移动。

2. 探讨relative与absolute之间的关系，主要分为三种情况：

① 父元素为absolute，子元素为relative；这种情况下，子元素的定位行为类似于父元素为relative的情况，但需注意，如果子元素内含有文本内容，relative定位可能会导致布局微调。

② 父元素为relative，子元素为absolute；这是最常见的应用场景之一，用于实现子元素相对于父元素的精确定位，即使浏览器窗口大小发生变化，子元素也能保持相对稳定的位置。

③ 并列的两个元素均为relative；在这种情况下，每个元素的相对定位都是基于它们在文档流中的原始位置，而不是彼此之间的相对位置。但如果其中一个元素（如a标签）设置了left或top等偏移属性，另一个元素（如b标签）则会以a元素未变动前的位置作为参考点。

以上是目前对CSS定位技巧的初步总结，未来随着实践的深入，将继续补充和完善这些知识。