CSS技术问题：如何让子div相对于.window而非父元素定位到窗口右下角

这个问题其实是CSS定位上下文的典型坑！因为你给.parent也加了position: relative，导致.child的绝对定位会优先以最近的已定位（非static）祖先元素——也就是.parent——为参照，而跳过外层的.window。给你几个靠谱的解决方案，按需选择：

方案1：移除.parent的position: relative（最直接） #

如果.parent不需要依靠relative来定位内部其他元素，直接去掉它的position: relative即可。这样.child的绝对定位就会自动找上一层的.window作为参照：

.window {
  position: relative;
  /* 你的其他样式，比如宽高、背景等 */
}

.parent {
  /* 移除 position: relative; */
  /* 你的其他样式 */
}

.child {
  position: absolute;
  bottom: 0; /* 贴窗口底部 */
  right: 0; /* 贴窗口右侧 */
}

⚠️ 注意：如果.parent里面还有其他用absolute定位的元素，移除relative后这些元素的定位会受影响，得先确认业务允许这么改。

方案2：调整DOM结构（不修改.parent样式） #

如果不能碰.parent的样式，那就把.child从.parent的DOM节点里移出来，直接作为.window的子元素。这样结构上它就属于.window的直接后代，绝对定位自然会以.window为基准：

<div class="window">
  <div class="parent">
    <!-- parent原来的内容 -->
  </div>
  <div class="child">我要在.window的右下角</div>
</div>

.window {
  position: relative;
}

.child {
  position: absolute;
  bottom: 0;
  right: 0;
}

这个方案兼容性拉满，也不会影响.parent内部的任何元素，非常稳妥。

方案3：特殊场景下的备选（不推荐，仅应急） #

如果既不能改.parent的样式，也不能动DOM结构，那只能用JavaScript动态计算位置了——但这是下下策，因为CSS能解决的问题尽量别用JS。简单思路是：获取.window的位置和尺寸，然后设置.child的position: fixed或者absolute来定位到对应的右下角。不过这种方法会受窗口缩放、元素动态变化影响，需要监听resize事件维护，非常麻烦，所以优先选前两个方案。

内容的提问来源于stack exchange，提问作者user2722667