Div位置固定

Question

我有两个使用了position: fixed属性的div出现了问题。

如果您观察页面头部，滚动条位于后面而头部却在滚动条上方。请问如何解决这个问题？

HTML代码：

<div class="BG1">
 <div class="Data"></div>
</div>

<div class="BG2">
 <div id="Header">
  <div class="Header_Data"></div>
 </div>
 <br />a<br /><br />a<br /><br />
</div>

Code: http://jsfiddle.net/Z6Pwg/

- Mihai Viteazu

---

以前从未见过，对答案非常感兴趣。 - Alp

你可以通过创建一个没有将页面上所有元素都设置为 position: fixed 的布局来解决这个问题。与 div 滚动条不同，浏览器的滚动条无法被覆盖。 - James Montagne

Answer 1

我简化了你的示例：http://jsfiddle.net/uVjft/。实际上，你有一个position: fixed块在另一个块内部。滚动条对应于BG2块而不是窗口滚动条，实际上不能重叠。要修复这个问题，请尝试从BG2 div中删除position:fixed：http://jsfiddle.net/Z6Pwg/1/。

- claustrofob

---

是的，我看到了...但我该如何以那种方式做某些事情或进行修复...目前我找到的唯一解决方法是使“.BG2 #Header”宽度为99％，这样他就有滚动条的空间...问题是如果你想添加盒子阴影会有问题... - Mihai Viteazu

将 position: fixed 从 div 中移除不会解决问题吗？ - claustrofob

我找到了解决问题的方法... 我想升级一下，使宽度= 99％，因为滚动条是1％，从我看到的情况来看，它正在起作用...(对我的糟糕英语感到抱歉) - Mihai Viteazu

你试过这个链接吗？http://jsfiddle.net/Z6Pwg/1/ 它在Chrome和Firefox中都可以运行。 - claustrofob

这是你问题的答案吗？ - claustrofob

Answer 2

只需包含代码

  .BG2 #Header .Header_Data {
   width: 100%;
   height: 120px;
   overflow: hidden;
  background-color:#eee;

}

在您的 CSS 中进行修复，如果想要一个固定的标题，请不要使用透明背景。

---

谢谢

- Ajis