3

在我的网站上，我让背景图像始终居中，导航始终水平保持在同一位置，因此水平尺寸无关紧要，它始终在同一个位置，我通过使用：

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

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

嘻嘻！

这是我的例子！

jsfiddle.net

4

4 回答 4

0

不确定我是否理解正确，但这是您要查找的内容：

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

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

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

于 2013-07-24T19:44:51.387 回答
0

将您的导航类更改为：

#nav {
    list-style: none;
    position:absolute;
    right:50%;
    margin-right:155px;
    margin-top:220px;
}
于 2013-07-24T19:09:03.680 回答
0

这是因为

position:fixed;

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

您可以在此处阅读有关职位的信息

但是，如果您希望您的导航位于您的徽标旁边，您应该创建一个 div 并将导航和徽标都放入其中。

.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;
}
<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>

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

于 2016-05-23T05:24:15.603 回答
0

问题是

position: fixed;

在你的 CSS 中。

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

position: absolute;

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

您可以阅读更多关于W3 Schools定位的信息

于 2017-08-02T08:44:03.893 回答