CSS 解决绝对布局没有在父容中定位而是在根节点定位问题

现象

根节点设置了flex: column布局，其中有一个子元素，在子元素中需要使用绝对布局，将子元素的子元素定位在右上角。

但使用了position: absolute子元素的子元素定位在了根节点的右上角。

原因

父容器未设置定位。

默认的定位为static，不视作该元素已定位。

absolute元素会向上查找最近的已定位的祖先元素（即position为relative、absolute、fixed、sticky的元素），并以该元素为基准进行定位。

解决

设置子元素的子元素的父容器的定位为相对定位。

<div id="root-view">
    <div id="child1"></div>
    <div id="child2" style="position: relative;">
        <div style="position: absolute;top: 0; right: 0;">
        </div>
    </div>
    <div id="child3"></div>
</div>

说明

父容器的相对定位与根节点的flex布局不冲突，没有任何关系。