哪个祖先是相对定位的元素相对于？

Question

当具有相对位置的CSS元素位于左侧50％时，它也是相对的？我原以为它是最近的父元素，但以下情况似乎并非如此：

HTML

<div class="line">
    <span>
        <span>1234451</span>
    </span>
</div>

CSS

.line {
    width: 1px;
    position: fixed;
    height: 100%;
    left: 50%;
    border-left: 1px solid red;
}

.line span {
    position: relative;
}

.line span span {
    position: relative;
    left: -50%;
    border: 1px solid black;
    background-color: grey;
}

这会导致数字左侧从该行开始，如下所示：

           1234451
          |
          |
          |

如果我将.line元素的宽度更改为auto，我会得到所需的结果：

       1234451
          |
          |
          |

似乎最内层元素的定位与其父元素无关，而与其祖父母元素有关。那是对的吗？如果是这样，为什么呢？