html - 不同屏幕尺寸上的不同div定位

Question

我正在尝试编写一个个人网站，我正在 1366x768 笔记本电脑屏幕上测试我的网站，同时还连接了一个 1920x1080 显示器。我的 div 布局在笔记本电脑上看起来很完美，但是当我将网站移到显示器上时，其中一个 div 标签喜欢轻微移动(这很奇怪，因为其他标签看起来很好。

这是一张图片来说明我的问题:

我希望导航 div 的边框与字母 k 和 d 对齐，这在显示笔记本电脑显示器的顶部图像上效果很好，但正如您在下面的图像中看到的那样，div 发生了变化。红线显示实际对齐，绿线显示我想要的样子。

这是我的 div CSS:

nav{

    position: absolute;
    top: 60%;
    margin-left: 40%;
    margin-right: 20%;
    border: solid;

}

我的逻辑是，如果我使用百分比进行定位，那么 div 将适应不同的屏幕尺寸并固定在同一位置，但情况似乎并非如此。任何关于如何修复它的想法将不胜感激。

Answer 1

将导航放入与 Logo 相同的 div 中(假设类 .container)。

.container { position:relative; }

现在只需相对于 .container 定位导航。它应该出现在任何决议中。