Question

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

我使用“position：absolute;” （也试过：修复;）。两者都有同样的错误（我必须设置“left / right / top：0％”，因为我的每边都有一些自由空间。）

我想继续使用#headercontainer之外的下一个div，但我遇到了问题。下一个div不会在菜单“下方”开始，而是在相同位置简而言之，这两个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;
}

Answer 1

尝试将position: relative;与margin: 0;和padding: 0;一起使用如果它不起作用，则意味着双方的空格都来自父<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;
}

Answer 2

顶部和侧面的额外空间可能是由于身体上的默认填充/边距。确保您正在清除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 }

Answer 3

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

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

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

或

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

margin-top:/* height of menu */"

定位绝对的html和css问题

3 个答案: