3

我有以下 div：

#leftmenu{
position: fixed;
top: 50%;
margin-top: -65x;
height: 130px;
}

这个 div 垂直居中放置在页面上并且它是固定的，网页很高但 div 始终在屏幕中央可见。使用这些属性，如果我调整窗口大小，菜单会移动，因为它必须保持在当前窗口大小的 50%。我想要的是：
1）当我加载页面时，根据屏幕分辨率，div 必须放在 50% 的顶部（我的代码可以）
2）如果我调整窗口大小，它必须保持固定。我希望有一个像“min-top”或类似的属性来强制顶层，但它不存在。你能帮助我吗？

4

2 回答 2

3

1）当我加载页面时，根据屏幕分辨率，div 必须放在 50% 的顶部（我的代码可以）

建议：对于（取决于屏幕分辨率）您应该进行媒体查询，它是一个 css，它可以让您根据屏幕分辨率为您的 div 提供特定的属性。假设你有一个默认960px宽度，当屏幕得到330px你可以使用这个：

@media only screen and (max-width: 330px) {
  /*change the div position or what so ever. 
  This will work like javascript but is better!*/
}

然后你会看到div的位置或者它的宽度和bla bla样式的变化。

2）如果我调整窗口大小，它必须保持固定。我希望有一个像“min-top”或类似的属性来强制顶层，但它不存在。

是的，没有任何代码可以在不写任何东西的情况下做你想做的事。为此，您必须编写这些行。

  1. 对于stay fixed?

    写这个：

    div {
    position: fixed;
    }

    它应该进入media query. 然后，当您调整大小时，它将获得适用于第二个屏幕的第二种样式！

  2. 强行登顶？你可以使用这个：

    div {
    position: absolute;
    top: 0;
    }

将top: 0;确保它应该具有margin-top: 0;. 您可以使用此代码。

编辑：

你在评论中发布了这个：

我用谷歌搜索了媒体查询。我认为这不是我的问题的解决方案。不同的分辨率不是问题，每个分辨率的实际 css div 都放置在 50% 的顶部。问题是（在所有分辨率下）我调整浏览器窗口的大小。我希望调整窗口大小菜单不会向上或向下移动

为此，问题几乎完全相反！问题是百分比，当您调整 div 的大小时，您正在使 div 更短或更大！这正在改变它的立场。

您可以将其用于body标签。

body {
min-width: 900px;
max-width: 900px;
}

这样，900px无论您将它的大小调整为短小还是大，它都将始终保持不变。在您使用媒体查询更改它之前，它不会改变或永远不会改变它的宽度！我希望我现在回答你的问题。

于 2013-10-03T11:47:17.937 回答
0

是相对于浏览器窗口的位置。

用于position: absolute;相对于document.

于 2013-10-03T11:37:48.680 回答