Question

我想使用固定标题，背后有内容。菜单将包含锚链接，因此所有内容都将在一个页面中。

但是，我在早期阶段陷入困境。我认为这没问题，但似乎header div以某种方式与content div对齐。看起来它们有相同的余量。

如果删除了position:fixed;，它看起来应该是，但我想要修复它。

我真的不明白为什么会发生这种情况，因为它们彼此分开。使用像margin-top:-100px这样的东西感觉不对。

这样做应该没有丑陋的解决方案......

CSS：

#header {
position:fixed;
width:1200px;
border:1px solid black;
z-index:1;
overflow:hidden;
background-color:white;
}

#menu {
width:100%;
z-index:2;
}

#content {
margin: 100px 0 0 0;
background-color:red;
overflow:hidden;
width:1200px;
z-index: -1;
height:100%;
}

HTML

<div id="header">
 <h1>Header</h1>
  <div id="menu"><ul>
   <li><a href="#works">Works</a></li>
   <li><a href="#news">News</a></li>
   <li><a href="#about">About</a></li>
   <li><a href="#contact">Contact</a></li>
 </ul>
 </div>
 </div>

<div id="content">
  <div id="works" name="works"></div>
  <div id="news" name="news"></div>
  <div id="about" name="about"></div>
  <div id="contact" name="contact"></div>
</div>  

<div id="footer"></div>

Answer 1

将top: 0px;添加到您的#header班级

固定标题DIV按下而没有设置边距

1 个答案: