浏览器小白也能学会！CSS中神奇的relative定位让你任意玩转网页布局！

相对于其位置：揭开 CSS 相对定位的奥秘

作为网页设计师、前端开发者或网页爱好者，你必定会被 CSS 中的相对定位所惊艳到。它是一种强大的定位方法，让你轻松移动元素，而无需影响页面布局。即使你是一位 CSS 新手，也无需担心，本文将带你领略相对定位的精髓，让你成为 CSS 定位大师。

1、相对定位的奥秘：相对于谁？

顾名思义，相对定位是相对于元素原始位置进行定位的。这是否意味着元素可以脱离文档流，随意移动？答案是否定的。

元素进行相对定位后，浏览器会首先计算其在正常页面流中的位置，称为起始位置 。然后，根据起始位置，再调整元素的上下左右位置。但是，无论元素如何移动，它始终是文档流中的一员。

这意味着相对定位的元素无法脱离其父元素的范围，父元素的大小和位置也会影响相对定位元素的最终位置。理解这一核心概念，是充分利用相对定位的关键。

2、释放相对定位的力量：小试牛刀

现在，让我们迫不及待地亲手体验相对定位的魔力。打开一个 HTML 文件，在要定位的元素中添加 style 属性，并设置 position 为 relative。保存文件，并在浏览器中打开，你会发现元素并没有改变位置。

别着急，相对定位的魅力就在于它的灵活性。接下来，我们使用 top、bottom、left、right 属性分别控制元素上下左右四个方向的移动。这些属性的值可以是百分比、像素值或其他单位。

例如：

position: relative;
left: 100px;
top: 50px;

这样，元素就会向右移动 100 像素，向上移动 50 像素。是不是很简单？

3、驾驭 z-index：元素之间的层级较量

当多个元素重叠时，哪个元素应该在前面，哪个元素应该在后面？此时，z-index 属性就闪亮登场了。z-index 决定了元素在 z 轴上的层级，数值越大，元素越靠前。

z-index 的值可以为正整数、负整数或零。默认情况下，元素的 z-index 为零。如果你想让某个元素叠加在另一个元素之上，只需要将它的 z-index 值设为比另一个元素大即可。

position: relative;
z-index: 1;

这样，元素就会叠加在其他元素之上。

4、相对定位与绝对定位：兄弟间的区别与竞争

在 CSS 中，除了相对定位，还有绝对定位 absolute positioning。相对定位和绝对定位都是强大的定位方式，但它们有着不同的工作原理和应用场景。

绝对定位元素脱离文档流，根据页面左上角进行定位。这意味着绝对定位元素可以超出父元素的范围，并且不受父元素大小和位置的影响。

相对定位元素相对于其原始位置进行定位，始终是文档流的一部分。这意味着相对定位元素无法脱离其父元素的范围，而且父元素的大小和位置也会影响相对定位元素的最终位置。

5、相对定位的艺术与精髓

相对定位是一种非常灵活的定位方式，可以让你轻松移动元素，而不会影响页面布局。你可以通过 top、bottom、left、right 属性控制元素上下左右四个方向的移动，还可以使用 z-index 属性控制元素之间的层级。

相对定位非常适合创建复杂的网页布局，例如下拉菜单、模态窗口、工具提示等。如果你想让网页布局更加灵活，那么相对定位就是你的最佳选择。

常见问题解答

1. 相对定位元素可以脱离父元素吗？

不可以，相对定位元素始终是文档流的一部分，无法脱离其父元素的范围。

2. 相对定位元素的位置受哪些因素影响？

元素的起始位置（在正常页面流中的位置）以及 top、bottom、left、right 属性设置的值。

3. z-index 的默认值为多少？

0。

4. 相对定位与绝对定位有什么区别？

相对定位相对于其原始位置进行定位，始终是文档流的一部分；绝对定位脱离文档流，根据页面左上角进行定位。

5. 相对定位有什么优点？

灵活性高，可以轻松移动元素，而不会影响页面布局，非常适合创建复杂的网页布局。