滚动正文*在透明标题 div 下方*？答案

【问题标题】：Scrolling body *underneath* a transparent header div?滚动正文*在透明标题 div 下方*？
【发布时间】：2011-03-30 21:04:33
【问题描述】：

我正在尝试实现具有固定标题和固定侧边栏的滚动正文。我想我几乎就在那里，除了正文在 顶部滚动 标题。我希望我可以简单地增加标题相对于正文的 z-index 但这不起作用，因为标题大多是透明的。

这里是网站：link

有什么想法吗？谢谢

编辑：我应该澄清一下，我希望内容在标题下方滚动时不可见，而不仅仅是作为其下方的图层。

【问题讨论】：

标签： css header scroll transparency z-index

【解决方案1】：

对正文和标题使用相同的背景图片，但使用background-position:fixed。这样，标题将具有不透明度，以便内容在下方滚动并被隐藏。使用固定位置将确保两个图像看起来无缝。

附带说明，我无法查看您网站上的整个侧边栏，您可能需要重新考虑使用这种死板的布局。

【讨论】：

我希望有另一种方法，因为这会增加超过 1mb 的数据来加载，因为我们的背景图像往往是大文件。
1360x768 我刚刚测试了我发布的技术并且它有效，您只需要为#the_header 声明一个 z-index 并确保它占据整个顶部区域，与视口边缘齐平.在这种情况下使用填充并确保它位于 top:0 或内容将在标题的两侧和顶部可见。
它只下载一次文件，您可以随心所欲地使用它，而不必担心文件大小。下载后，它不会因为您在布局中使用了 17 次而再次下载。
好的，如果是这样，那就太好了。我会测试这个解决方案（我没有你那么快；）

【解决方案2】：

这是您的代码：

#thebody {
    display:inline-block;
    position:relative;
    width:984px;
    margin-left: 0px auto;
    margin-right: 0px auto;
    font-size:24px;
    text-align:center;
    height:100%;
    z-index:-1;
}

#theheader {
    display:inline-block;
    font-size:26px;
    width: 984px;
    margin-left: 0px auto;
    margin-right: 0px auto;
    background-color:none;
    clear:both;
}

z-index 的工作方式是，任何要包含在分层中的东西都需要有一个 z-index 集。因此，现在在您的代码中，仅设置了 #thebody。将此添加到#theheader：

#theheader {
    display:inline-block;
    font-size:26px;
    width: 984px;
    margin-left: 0px auto;
    margin-right: 0px auto;
    background-color:none;
    clear:both;
    z-index: 10;  /* addition */
}

这会将#theheader 置于#thebody 之上。祝你好运，如果您有任何问题，请告诉我。

【讨论】：

@TNC：相对位置不起作用，他当然使用固定位置。您不需要相对位置来使 z-index 起作用，只需 any 位置声明。
我没有在里面看到一个职位，这就是我放它的原因。如果它已经存在，我会删除它。
所以现在内容在标题下方滚动，但它在通过下方时仍然可见。看一看：link
编辑：我应该澄清一下，我希望内容在标题下方滚动时不可见，而不仅仅是作为其下方的图层。
@yajus：请看我的 cmets，我已经解决了这个问题。您需要为标题设置背景图片并使用background-position:fixed