0

我想在固定位置有一个菜单，即使我滚动等等。

我使用“位置：绝对；” （也尝试过：固定；）。两者都有相同的错误。
（我必须设置“左/右/上：0%”，因为我在每一侧都有一些可用空间。）

我想继续下一个 div，它在#headercontainer 之外，但我在那里遇到了问题。下一个 div 不是从菜单“下方”开始，而是在同一位置。
简而言之，这 2 个 div 相互重叠。

我可以用保证金解决这个问题......但我认为我做错了什么！由于下一个 div 部分还需要左/右 0% 以及位置对齐，否则我会再次在两侧获得这些空闲空间。

HTML：

<body>
  <div id="headercontainer">
    <div id="logo">
      <a href="">
        <img src="images/logo/logo.png" id="headlogo" />
      </a>
      <h1>Robert</h1>
    </div>

    <nav role="navigation" class="navigation">
      <ul>
        <li> <a href=""> ABOUT ME </a></li>
        <li> <a href=""> SKILLS </a></li>
        <li> <a href=""> WORK </a></li>
        <li> <a href=""> CONTACT </a></li>
      </ul>
    </nav>
  </div>
</body>

CSS：

#headercontainer{
  position: absolute;
  top: 0%;
  right: 0%;
  left: 0%;
  background: #000;
  opacity: 0.7;
  color: #fff;
  -moz-box-shadow: 2px 2px 15px #000;
  -webkit-box-shadow: 2px 2px 15px #000;
  box-shadow: 2px 2px 15px #000;
}
4

3 回答 3

1

尝试使用position: relative;with margin: 0;andpadding: 0;
如果不起作用，则表示两边的空格来自 parent <div>。

#headercontainer{
  position: relative;
  float: left;
  width: 100%;
  background: #000;
  opacity: 0.7;
  color: #fff;
  margin: 0;
  padding: 0;
  -moz-box-shadow: 2px 2px 15px #000;
  -webkit-box-shadow: 2px 2px 15px #000;
  box-shadow: 2px 2px 15px #000;
}
于 2013-07-24T17:35:18.507 回答
1

顶部和侧面的额外空间可能是由于主体上的默认填充/边距。确保清除 CSS 中的内容或使用 CSS 重置：

然后，position: fixed为您添加和设置高度，headercontainer并为主体添加相应的上边距，以确保它们不重叠：

/* Reset margins -- or use a CSS reset */
html, body { margin: 0; padding: 0}

/* Fix the header container to the top */
#headercontainer { position: fixed; top: 0; left: 0; right: 0; height: 80px }

/* Add a matching top margin to your body element */
body { margin-top: 80px }
于 2013-07-24T17:54:28.533 回答
0

使用position:fixed并给元素一个高度。然后在你的顶部<body>，插入如下内容：

<div id="push" style="height:/* height of menu */"></div>

它是一个空块，将内容“推”下固定元素的高度。

或者

将菜单以外的所有内容放入包含的 div 中，并给出该 div

margin-top:/* height of menu */"
于 2013-07-24T17:37:31.447 回答