Html 不带set-top属性的Position absolute提供了不一致的渲染

我在本地做一个个人项目，我开始注意到我的导航有时在刷新时消失了

这是一段视频，在谷歌Chrome中，我除了执行正常刷新外，什么都没做，导航就消失了

如果我再次刷新，导航将返回到正常位置

查看我的CSS，发现我的导航有

位置：绝对和
右侧：0px，但未设置
top
属性

当我写
top:0px不一致的渲染停止

此代码笔是我页面顶部的一个普通副本，除了
：

在我的页面上，使用php进行导航，如下所示：

<?php 
    $pages = [
        "work" => "Work",
        "about" => "About",
        "contact" => "Contact",
        "blog" => "Blog"
    ];
?>
<div class="navigation-container">
    <div class="navigation centered">
        <div class="signature"><a href="<?php echo $pageURL ?>"></a></div>
        <ul>
            <?php 
                foreach ($pages as $pageLink => $pageName) {
                    echo "<li><a href='$pageURL/$pageLink'>$pageName</a></li>";
                }
            ?>
        </ul>
    </div>
</div>





然后网站会得到这样的结果：

那么有人知道为什么会这样吗？这是一个错误吗？
您不应该使用绝对定位。在gif中，当您检查列表项时，可以看到它们位于顶部标题下方。或者，您可以保持绝对定位并设置高z索引。您在其他浏览器中看过这个问题吗？
我认为您看到了一个工件，这是由于CSS规范中与绝对位置和包含块的静态位置相关的部分

如果CSS中未为
位置：绝对
指定偏移，则浏览器将计算包含块的静态位置，并将该位置用于偏移

然而，CSS规范并没有确切地说明如何确定包含块的静态位置，因此，不同的浏览器做得不同。这可能是因为Chrome的静态位置计算算法有些模糊，结果会随页面刷新而变化

正如您所注意到的，如果您指定
top
偏移，问题就会消失，因为静态位置计算不会起作用

您没有做错任何事情，只是看到了CSS规范中有点模糊的部分的效果

参考资料：
是否可能是缓存问题？你试过硬复位吗？打开dev控制台并按住刷新按钮。删除页面缓存并重新加载。@JDB我很确定它不是缓存。如果没有top属性集，匿名模式下的硬刷新仍然不一致。看CSS，它保持不变，但如果我切换位置：绝对；在Chrome开发控制台上关闭和打开，它会回到正常位置。当父容器设置为相对时，使用绝对定位没有什么错。正确的位置是首先在视频中显示的位置，然后有时（每隔5次刷新左右）它会下降。如果我将top属性设置为0，则不会发生这种情况。刚刚在Firefox中测试过，但在Firefox中没有。我没有使用任何特定于webkit的CSSCS，有时候真的很奇怪，所以这听起来是对的。谢谢你的回答：）