绝对位置绝对定位
我有3个div元素。
第一格大（包装），有position:relative;
第二格被定位为绝对的第一格相对定位（并包括在第一格）
第三格包含在第二格，也有绝对定位。
<div id="1st"> <div id="2nd"> <div id="3rd"></div> </div> </div>
为什么第三个div位置对第二个div绝对（这也是第一个div绝对位置）而不是第一个div有相对位置？
因为第三个div是绝对定位的第二个div的绝对定位。
因为position: absolute重置孩子的相对位置，就像position: relative一样。
没有办法绕过这个 – 如果你想让第三个div相对于第一个div完全定位，你必须把它做成第一个div的孩子。
这两个position:relative和position:absolute确立含有元素作为定位的追求者。
如果您需要将div 3定位到div 1，则将其设置为div 1的直接子元素。
注意position: relative表示元素相对于其自然位置和position: absolute表示元素相对于其第一个position:relative或position:absolute祖先 。
静态位置：如果没有指定位置，则静态位置是元素在HTML文件的正常stream程中出现的默认方式。
重要说明： top ， right ， bottom和left属性对静态位置元素没有影响。
相对位置：使用相对值定位一个元素，使元素（及其占据的空间）保持在HTML文件的正常stream程中。
然后可以使用left ， right ， top ， bottom属性来移动元素。 但是，这可能会导致元素与页面上的其他元素重叠，这可能是也可能不是您想要的效果。
一个相对定位的元素可以从它的位置移动，但它占据的空间仍然存在。
绝对位置：将绝对位置值应用于元素将其从正常stream程中移除。 当您移动绝对定位元素时，其参考点是其最近包含元素的顶部/左侧，其位置声明不是静态的 – 也称为最近的定位上下文。 因此，如果不存在包含静态位置以外的元素，则它将位于body元素的左上angular。
在你的情况下，第三个最近的包含容器是第二个。
又一个澄清的答案。
你目前的情况是这样的：
#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规范在这里解释，是因为绝对定位的元素的“parent”元素（更好的说：包含块）不一定是它的直接父元素，而是它的直接定位元素，即任何其位置设置为static元素，例如position: relative/absolute/fixed/sticky;
因此，只要有可能，在你的代码中，如果你想让第三个div元素相对于第一个div完全定位，你应该把第二个div元素设置为position: static; 这是它的默认值（或者只是简单地删除你的第二个div元素的规则集中的任何position: ...声明。
以上将使第一个div为第三个绝对定位div的包含块 ，忽略第二个div用于此定位目的。
希望它有帮助。
