定位绝对html和css问题答案

【问题标题】：position absolute html and css problems定位绝对html和css问题
【发布时间】：2013-07-24 07:17:39
【问题描述】：

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

我使用了“位置：绝对；” （也尝试过：固定；）。两者都有相同的错误。
（我必须设置“left/right/top: 0%”，因为我在每一边都有一点空闲空间。）

我想继续使用 #headercontainer 之外的下一个 div，但我遇到了问题。下一个 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;
}

【问题讨论】：

如果你想让你的菜单在同一个地方，为什么不使用 position:fixed; ?
感谢您的回答。我也试过“位置：固定”。但是下一个
仍然从“#headercontainer”开始。我正在寻找的是下一个
（正文）及其内容在“#heardercontainer div”（在它下面）之后开始，而不使用边距......因为它应该像那样工作而没有问题。这就是为什么我认为我的“位置”有问题但我找不到。
你能把这个放到 jsfiddle.net 中，这样我们可以试试看问题是什么。
您应该阅读以下内容：stackoverflow.com/questions/10975268/…、css-tricks.com/…、htmlgoodies.com/beyond/css/article.php/3872271/…

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

/* 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 }