绝对定位中的绝对定位

使用网页布局时，通常使用绝对定位等定位技术来精确排列元素一页。但是，当您尝试在本身绝对定位的元素内应用绝对定位时，就会出现潜在的问题。

假设您有一个具有相对定位 (position:relative) 的容器元素 (1st div)，它允许您相对于其自身位置定位子元素。在此容器中，您有一个绝对定位的元素 (2nd div) 和嵌套在第二个 div 内的第三个绝对定位元素 (3rd div)。

在这种情况下，您可能期望第三个 div 绝对定位相对于第一个 div，即使第二个 div 也是绝对定位的。然而，事实并非如此。

了解定位层次结构

这种行为的原因在于绝对定位的工作方式。当一个元素被给予绝对定位时，它会从文档的正常流中删除，而是相对于其最近的定位祖先进行定位。在这种情况下，第2个div是第3个div最近的定位祖先，无论第1个div是否也具有相对定位。

这意味着第3个div的绝对位置是相对于第2个div计算的div 的位置，而不是第一个 div 的位置。因此，第 3 个 div 将绝对定位在第 2 个 div 内，而不是第 1 个 div。

备用定位技术

如果您希望第 3 个 div 是相对于第一个 div 绝对定位，您需要将其设为第一个 div 的直接子级。这将允许第三个 div 继承第一个 div 的绝对位置并进行相应的定位。

需要注意的是，position:absolute 会像position:relative 一样重置子级的相对位置。因此，如果相对定位的父元素中有多个绝对定位的子元素，则它们的位置将相对于其最近的绝对定位的祖先独立计算。