定位元素相对于某些祖先但不一定是直接父母？

Question

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

HTML：

<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>

的CSS：

.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;
}

https://jsfiddle.net/ruzexo2r/

它好像一个具有position：absolute的元素有任何父级位置：相对，中间没有任何内容但位置：固定然后它们的行为就像绝对/相对元素一样立即相关。我没有找到关于这种行为的明确确认，所以我问我是否可以指望继续工作？