Css 相对于某个祖先定位元素，但不一定是直接父元素？

我需要一个元素数组中的项包含两个元素：一个元素位于规则的事物流中，另一个元素相对于数组容器是绝对的。摆弄位置：相对/绝对/固定，我偶然发现：

html:

就好像一个position:absolute的元素有一个position:relative的父元素，中间没有任何东西，只有position:fixed，那么它们的行为就像绝对/相对元素是直接相关的。我没有找到关于这种行为的明确确认，所以我想问我是否可以依靠它继续工作？

看一看：看一看：

<div class="mainContainer">

    <div class="flexItem">
        stuff1
        <div class="itemContent" style="color:blue">
            I'm positioned absolutely, relative to the main container
        </div>
    </div>

    <div class="flexItem">
        stuff2
        <div class="itemContent" style="color:red">
            I'm positioned absolutely, relative to the main container too!
        </div>
    </div>
</div>

.mainContainer {
    width:60%;
    margin-left:20%;
    position:relative;
    border:1px solid black;
    display:flex;
    justify-content:space-around;
}

.flexItem {
    position:static;
}

.itemContent {
    position:absolute;
    left:0px;
    top:20px;
}