CSS 中的相对定位与绝对定位：区别与比较

CSS 世界向我们介绍了各种条款和条件。 CSS 是 HTML（一种标记语言）中的一种重要编程语言。

它由几位专业的计算机专家和计算机分析师负责。 相对定位和绝对定位这两个术语属于 CSS 编程语言。

关键精华

1. 相对定位将元素相对于其原始位置移动，而不影响其他元素的布局。
2. 绝对定位从文档流中移除一个元素，并将其定位到与其最近的定位祖先相关的位置。
3. 相对定位保持元素在文档流中的位置，而绝对定位可以重叠或破坏其他元素。

相对定位与绝对定位 在 CSS 中

相对定位与元素在文档中的移动有关。 文档的布局不会改变相对定位。 绝对定位与元素在不同文档中或从一个文档到另一个文档的移动有关。 可以在绝对定位中更改文档的布局。

CSS 中的相对定位是编程中最有价值的术语之一（计算机分析师使用）。

它移动一个元素，使其相对于其原始位置保持不变。 “相对”一词是指按比例衡量的整体。

它不会更改文档的布局。 它将对象移动到左侧、右侧、顶部和底部。

CSS 中的绝对定位是一种有价值的定位类型，可帮助您将元素放置在任何您想要的位置。

它的动画类型是离散的（类似于相对位置的动画类型）。 该位置的 G 代码为 G90。 绝对位置总是相对于父元素放置元素。

这种类型的位置适用于命名元素。

对比表

比较参数	CSS 中的相对定位	CSS 中的绝对定位
功能	相对定位将元素移动到文档中的左侧、右侧、顶部或底部区域。	绝对定位将元素从一个文档流移动到另一个文档流。
何时使用	当特定页面的内部元素将被绝对定位时，使用相对定位。	当页面元素的内部元素相对定位时，使用绝对定位。
反应本机	相对定位对父级是绝对的。	绝对定位是相对于父级的。
正常文件流程	相对定位在正常文档流中有一个元素。	绝对定位从正常文档流中取出一个元素。
布局	在这种情况下，布局不会更改或保持不变。	在绝对定位的情况下，布局发生了变化。

什么是CSS中的相对定位？

CSS 中的相对定位是编程世界中最有价值的定位之一。

当需要绝对放置特定元素的内部元素时，使用此定位。

在相对定位中，元素总是相对于父元素绝对放置并相对于其正常位置。

在 CSS 中，相对定位会导致元素向左、向右、底部或顶部位置移动。

这种类型的布置可能会导致形成一些无法填充的空白空间或间隙。 这种类型的定位不会改变布局。

需要了解几个细节才能理解“相对定位”一词。 下面给出了其中一些细节：

• 动画类型 - 离散
• 计算值——按照说明
• 默认值 - 静态

相对定位将元素保留在普通文档中 流. 元素的正常位置保留在文档中，类似于静态值。 CSS 为这种类型的定位分配了独特的责任。

相对定位提供了几个功能。 其中一些功能是：

• 它有助于确定元素的位置。
• 它有助于调整元素在其原始位置内的位置。
• 相对定位赋予了定位内部元素（在页面元素内）的能力。

什么是CSS中的绝对定位？

CSS 中的绝对定位是一种改变页面布局的独特定位类型。

这种定位类型从正常的文档流中取出一个元素； 因此，其他元素的定位就像该特定元素从未存在过一样。

在绝对定位中，元素始终相对于父元素放置，并且绝对放置在其正常位置。

在CSS中，当特定元素页面的内部元素需要相对放置时，使用绝对定位。绝对定位用于命名元素。

它不适用于类或一般元素类型。 这种定位的主要原则是它一次只作用于一个元素。

一些计算机分析师和专家不知道如何使用绝对定位使元素居中。

下面给出了如何使用此类定位对元素进行居中的几个步骤：

• 将 left 添加到要居中的元素的 50℅。
• 添加等于元素宽度一半的负左边距。
• 然后，在要居中的元素的 50℅ 处添加一个顶部。
• 最后，添加等于工具宽度一半的负顶部边距。

相对定位和绝对定位的主要区别 在 CSS 中

1. 相对定位是相对于其父级的绝对定位，而另一方面，绝对定位是相对于其父级的。
2. 相对定位移动具有特定文档布局的元素，而另一方面，绝对定位将元素从一个文档移动到另一个文档。
3. 在相对定位的情况下布局保持不变，而另一方面，绝对定位改变了布局。
4. 元素相对于保持在正常文档流中，而另一方面，在绝对定位中，元素被带出正常文档流。
5. 在相对定位中，内部元素是相对定位的，而在另一方面，在绝对定位中，内部元素是绝对定位的。

参考资料

1. https://dl.acm.org/doi/abs/10.1145/1067170.1067190
2. https://link.springer.com/article/10.1007/PL00012910

最后更新时间：26 年 2023 月 XNUMX 日