Question

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

以下是网站：link

有什么想法吗？感谢

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

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-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上。祝你好运，如果你有疑问，请告诉我。

在透明标题div下面滚动正文？

2 个答案:

在*透明标题div下面滚动正文*？

2 个答案:

在透明标题div下面滚动正文？