Question

在我的网站上，我得到的背景图像始终保持居中，导航始终保持在水平相同的位置，因此HORIZONTAL尺寸并不重要，它总是在我使用的相同位置：< / p>

#nav {
    list-style: none;
    position:fixed;
    right:50%;
    margin-right:155px;
    margin-top:220px;
 }

我的问题在于VERTICAL部分。当窗口垂直较小并且向下滚动时，菜单随页面移动，我不希望这样。我想让它留在那里有徽标，但使用“顶部”的百分比似乎不起作用。我对javascript不是很熟悉所以如果它可以用CSS，那么我就更容易理解了！

HEEELP！

这是我的榜样！

jsfiddle.net

Answer 1

将您的导航类更改为：

#nav {
    list-style: none;
    position:absolute;
    right:50%;
    margin-right:155px;
    margin-top:220px;
}

Answer 2

不确定我是否理解正确，但这正是您所寻找的：

#nav {
    list-style: none;
    position:fixed;
    left: 0;
    top:220px;
}

你的小提琴：http://jsfiddle.net/wQdVv/16/

请注意移动设备上的position:fixed是一个坏主意，因为支持不好并会产生奇怪/不需要的结果。在移动设备上使用static（使用媒体查询）

Answer 3

因为

position:fixed;

这意味着您希望导航随屏幕一起移动。

you can read about positions here

但如果您希望导航设置在徽标旁边，则应创建一个div并将导航和徽标放入其中。

＆＃13;

.header
{
  background-color:transparent;/* you can write any color you want but in this way it gets hidden */
  text-align:center;
  position:relative;
  }
#nav
{
  position:absolute;
  bottom:-15px;
  right:42%;
  display:inline-block;
}
ul
{
  list-style:none;
}

＆＃13;

<html>
  <body>
    <div class="header"><!--div that contain both logo and nav-->
      <img src="logo.png" alt="logo" /><!--logo image-->
        <!--nav  codes here-->
        <div id="nav">
          <ul><li>nav</li></ul>
        </div>
      </div>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><center><h2><p>As You can see it doesn't move with page scrolling</p></h2></center>
    </body>
  </html>

＆＃13;

上面的代码就是一个简单的例子。

Answer 4

问题是

position: fixed;

在你的CSS中

。

fixed表示停留在屏幕的这一部分，即使在滚动时也是如此。将其更改为：

position: absolute;

并且导航栏将保留在您放置的任何位置，即使在滚动时也不会移动。

您可以在W3 Schools

了解更多有关定位的信息

当窗口向下滚动CSS时，如何使导航栏不移动？

4 个答案: