哪些是相对定位？

在Web开发中，CSS的定位属性是构建页面布局的关键。其中，`position`属性控制元素的体现方式和在文档流中的位置。 `relative`是一种常见的定位方式， 它允许我们对元素进行微较小的位置调整，而不会作用于其他元素的布局。明白相对定位是掌握CSS布局的基础，原来如此。。

相对定位的工作岗位原理

不错。 当一个元素被设置为 `position: relative` 时它仍然占据其在正常文档流中的空间范围。这意味着它不会像 `position: absolute` 那样脱离文档流。 相对于其正常位置， 通过 `top`、`right`、`bottom` 和 `left` 这一些属性能够进行偏移。

给元素添加偏移样式

也许吧... 要给元素添加偏移效果，只需为其添加以下 CSS 样式：

.element { position: relative; top: 10px; left:20px;}

这里的 `top` 和 `left` 值定义了相对于元素自身位置的移动距离。你能够根据需要修改这一些值来调整元素的偏移量。

相对定位与绝对定位的差别

相对于父元素的定位

`position :relative` 的关键在于它定义了相对于其正常位置进行移动。 与之相反的是当一个元素设置为 `position :absolute`, 它会相对于最近的已设置了 `position :relative`, `position :absolute`, `position :fixed`, 或 `position :sticky` 的祖先元素进行偏移。 如果没有这样的祖先元素，则该元素会一直向上找到 body 或初始包含块来进行定位。

相对定位的应用场景

微调图标对齐

让我们一起... `relative` 定位非常适合于微调图标的位置。举个例子，你有可能希望将某个图标稍微向左或向上移动一点点，使其与文本或其他元素更良好地对齐。

文字偏移

`relative` 能够用来调整文字的位置, 盘它... 举个例子将文本稍微错开以获取更良好的视觉效果.

子元素的相对移动

子元素的绝对与相对结合

注意事项

沉重叠问题

避免混淆

JavaScript 获取浏览器差异

合理采用Relative的优势

一些额外的提示和技巧