我有3个div元素。
第一个div更大（包裹）且具有position:relative;
第二个div相对于第一个div进行绝对定位（并包含在第一个div中）
第三个div包含在第二个div中，也具有绝对定位。
<div id="1st">
<div id="2nd">
<div id="3rd"></div>
</div>
</div>
div 的定位是相对于第二个 div（第二个 div也是相对于第一个具有相对定位的 div），而不是相对于第一个具有相对定位的 div？div 是相对于已经绝对定位的第二个 div 定位的。因为position: absolute和position: relative一样，会重置子元素的相对位置。
没有绕过这个问题的方法——如果您想要第三个div相对于第一个div进行绝对定位，那么您必须将它设为第一个div的子元素。
position: relative 的意思是该元素将通过使用 top、right、bottom 和 left 相对于其当前位置进行定位。而 position: absolute 的意思是该元素将相对于浏览器窗口或第一个具有 position: absolute 或 position: relative 的父元素进行定位。我的翻译是否清晰易懂？ - selerposition:relative和position:absolute都会将其包含元素作为定位祖先。
如果你需要基于div 1定位div 3，则让它成为div 1的直接子元素。
请注意，position: relative表示元素相对于其自然位置定位，而position: absolute表示元素相对于其第一个具有position: relative或position: absolute属性的祖先元素进行定位。
静态定位：如果一个元素没有指定定位属性，那么它在 HTML 文件中的默认位置称为静态位置。
重要提示：在静态定位元素上，top、right、bottom 和 left 属性无效。
相对定位：将元素定位属性设置为相对定位会使该元素（及其所占用的空间）保留在 HTML 文件的正常流程中。
您可以使用属性 left、right、top 和 bottom 将元素移动一定距离。但是，这可能导致该元素与页面上的其他元素重叠，这可能是您想要的效果，也可能不是。
相对定位的元素可以移动，但是它所占用的空间仍然在原处。
绝对定位：将元素的定位属性设置为绝对定位可将其从正常流程中移除。当您移动绝对定位的元素时，其参考点是最近的具有非静态定位声明的包含元素的左上角，也称为最近的定位上下文。因此，如果不存在具有非静态定位的包含元素，则它将从 body 元素的左上角定位。
在您的情况下，第三个元素的最近包含容器是第二个元素。
再次给您一个明确的答案。
您当前的情况是这样的：
#my-parent {position: absolute}
#my-parent .my_child {position: absolute}
如果你对此感到困惑，这里提供一些帮助：
如果你可以修改HTML，只需按照以下步骤进行：
#my-parent {position: absolute}
#my-parent .my-wrapper {position: relative} /* Since you've added the wrapper in HTML */
#my-parent .my-wrapper .my-child {position: absolute} /* Now you can play with it */
div 元素绝对定位到第二个 div 元素的原因是，根据 CSS 规范在这里解释的那样（链接），绝对定位元素的“父”元素（更好的说法是：包含块）不一定是它的直接父元素，而是它的直接定位元素，即任何其位置设置为除 static 以外的值的元素，例如 position: relative/absolute/fixed/sticky;
因此，在您的代码中只要可能，如果您想让第三个 div 元素相对于第一个 div 元素绝对定位，您应该将第二个 div 元素设置为 position: static;，这是它的默认值（或者只需在第二个 div 元素的规则集中简单地删除任何 position: ... 声明）。
上述方法将使第一个 div 成为第三个绝对定位 div 的包含块，在此定位目的上忽略第二个 div。
希望这有所帮助。
clear: both; 样式来实现这个结果，这样可以重置子元素并允许其使用自己的 absolute 定位。