在透明标题 div *下方*滚动主体？

Question

我正在尝试实现具有固定标题和固定侧边栏的滚动主体。我想我已经快到了，只是正文在标题顶部滚动。我希望我可以简单地增加标题相对于正文的 z 索引，但这不起作用，因为标题大部分是透明的。

这是网站：链接

有什么想法吗？ 谢谢

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

Answer 1

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

顺便说一句，我无法查看您网站上的整个侧边栏，您可能需要重新考虑使用这种严格的布局。

Answer 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 索引的工作方式是，要包含在分层中的任何内容也需要有一个 z 索引集。因此，现在在您的代码中，仅设置了#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 之上。祝你好运，如果您有疑问，请告诉我。