CSS如何让绝对定位元素超出相对定位父元素固定贴靠屏幕左侧

现有代码片段如下：

<div class="parent">
    <div class="child">
    </div>
</div>

<style>
.parent {
    height: 500px;
    width: 500px;
    background: red;
    margin: 0 auto;
    position: relative;
}

.child {
    height: 200px;
    width: 200px;
    background: green;
    position: absolute;
    left: 0;
}
</style>

已知约束：

• 红色父元素.parent设置了position: relative，宽高均为500px，通过margin: 0 auto实现水平居中
• 绿色子元素.child初始设置为position: absolute，宽高均为200px
• 禁止修改父元素的定位属性（例如不能给父元素追加position: unset这类规则），仅通过编写CSS实现效果：绿色子元素超出红色父元素范围，始终固定贴靠在屏幕最左侧。

效果参考：

该需求完全可以实现。

实现代码 #

仅需要修改.child的定位属性即可，不需要改动父元素任何样式：

.child {
    height: 200px;
    width: 200px;
    background: green;
    /* 仅修改以下两行即可满足要求 */
    position: fixed;
    left: 0;
}

实现原理 #

• 很多人存在认知误区：认为设置了position: relative的父元素会成为所有类型定位子元素的参照，实际上这个规则仅对position: absolute的子元素生效。
• position: fixed的元素默认以浏览器视口作为定位参照，只有当祖先元素存在值不为none的transform、perspective、filter属性时，才会改变fixed元素的定位参照；本案例中父元素仅设置了position: relative，不存在上述特殊属性，完全不会干扰子元素的fixed定位效果。
• 代码中没有给.child设置top偏移值，它的垂直位置会自动保留在正常文档流中的原始位置，和红色父元素顶部对齐；水平方向设置left: 0后，会始终贴靠在视口最左侧，滚动页面时也会保持固定在屏幕左侧的位置，完全符合需求。

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