我一直在整个互联网上寻找这个问题的答案，但我就是找不到答案..我有一个透明的标题，其中填充了与我的背景相同的背景图像，我想要我的主 div 在其下方滚动，以便隐藏文本。这是 HTML:
<body>
<div class="wrapper">
<div class="top">
<!-- This is my header -->
</div>
<div class="main">
[.....]
</div>
这是 CSS:
.top {
background-image:url("http://img138.imageshack.us/img138/9215/headerqrk.png") no-repeat top center fixed;
margin-top:0px;
height:100px;
width:1000px;
margin-left:auto;
margin-right:auto;
vertical-align:central;
padding-left:0px;
padding-right:opx;
}
.main {
position:absolute;
top:100px;
bottom:20px;
left:0;
right:0;
width:990px;
margin:0 auto;
padding-top:10px;
padding-left:5px;
padding-right:5px;
z-index:-1;
}
我制作了一个 jsFiddle，可以在这里找到:http://jsfiddle.net/qcaJJ/ 。你能帮我看看如何让它工作吗？提前致谢!
ps. 请不要介意页脚，我已经使用了我的另一页的页脚，我不希望这个页脚出现在本页上:p
pps。如果有人知道如何让导航保持在其位置并且 main2 div 滚动，那么你就是我的英雄!对 HTML 和 CSS 有点陌生..
最佳答案
除了使用标题的固定位置之外，正如其他答案所指出的那样，您还使用具有透明度的背景图像，因此当主要部分在下面滚动时，您仍然可以看到它。您需要像这样添加背景颜色，以确保标题 div 覆盖下面滚动的内容:
.top {
background: #fff url("http://img138.imageshack.us/img138/9215/headerqrk.png") no-repeat top center fixed;
关于html - 透明标题被主 div 溢出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15454682/