Question

我正在尝试建立一个网站，而我正在制作一个网站，我在两台显示器上测试它：我的1366 x 768笔记本电脑和1080p显示器连接到它。我正在尝试对齐div标签，以便始终保持在同一个地方，我正在使用它：

 nav{
    position:absolute;
    left: 40%;
    top: 60%
    }

然而，这似乎没有完成工作。它在一台显示器上运行正常，但在另一台显示器我会假设，如果我使用百分比而不是像素，那么它将起作用。关于这里出错的任何建议都将非常感激。

Answer 1

您的div有class = nav还是id = nav？在这种情况下，如果是类和nav包含.，则在您的css中使用#加前缀px。

如果您希望div与浏览器的左上角和左上角完全相同，请切换回%

{{1}}将与您的浏览器尺寸相关。

Answer 2

我假设您正在尝试相对于浏览器窗口定位一个元素（当您谈论显示器大小时，我假设您想要这样做。即全屏浏览器。

在这种情况下，您将要使用

nav{
  position:fixed;
  left: 40%;
  top:60%;
}

这会将元素从正常的流程规则中分离出来并相对于视口移动它。

我不知道任何针对OS桌面空间的窗口位置的CSS规则。

Answer 3

使用position:absolute;时，所有固定元素都将基于<html>。

这意味着它将留下您正在使用的任何监视器的40％。宽度越大，位置就越大。

要解决此问题，您需要一个包含position: relative的父容器。

现在，带有position:absolute的父元素中pos:rel的任何内容都将与此元素相关，而父元素仍然会跟随文档流。

简而言之：

 //html
<body>
   <element>
        <nav>
        </nav>
   </element>
</body>
//css
element {
     position:reletive;
 }
 nav{
     position:absolute;
     left: 40%;
     top: 60%
}

CSS获取不同显示器大小的div标签的确切位置

3 个答案: