html - 微博 : Content Overlaps Fixed Header?

Question

我能够在我的 Tumblr 博客中编写一个固定的标题:http://artsypancake.tumblr.com/

标题在我的主页上运行良好，并且与所有帖子重叠，这是预期的效果。但是，当我向下滚动时，自定义页面上的内容会覆盖标题。示例:http://artsypancake.tumblr.com/aboutme这令人困惑，因为它只发生在我制作的自定义页面上。

此外，我尝试增加页眉的 z-index，但这对自定义页面帖子没有任何影响。

这是标题的 CSS:

#topbar {
z-index: 999;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 27px;
text-align: center;
background-color: {color:Top Bar Background};
border-bottom: 3px solid {color:Top Bar Border};
}

#topbar a {
position: relative;
font-family: text me one;
color: {color:Top Bar Text};
background-color: {color: Top Bar Text Background};
letter-spacing: 1px;
font-size: 9px;
text-transform: uppercase;
margin: 5px;
padding: 5px;
top: 7px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

#topbar a:hover {
background-color: {color:Top Bar Text Hover BG};
color: {color:Top Bar Text Hover};
}

内容的 CSS:

.entry {
position: relative;
width: 500px;
background-color: {color:Entries};
border: 2px solid {color:Entries Border};
margin-bottom: -30px;
margin-top: 55px;
margin-left: 400px;
padding: 10px;
word-wrap: break-word;
}

还有标题和条目的 HTML，它们紧挨着彼此:

<div id="topbar">...</div></div>
<div class="entry">...</div></div>

谢谢!

Answer 1

cometd !问题在于，在您的自定义页面上，标题是 .leftbg 的子项，而在主页上，标题是其他所有内容的对等项。 #topbar 的 z-index 为 999，但这只会影响其对等项(在本例中为 .entries)。要查看此内容，请在自定义页面上检查元素 #topbar，然后在您的主页上检查。在 html 中，标题要么与其他条目一起放置(以便 z-index:999 将标题置于其他内容之上)，要么作为 .leftbg 的子项，其默认 z-index 为“自动”。

要解决此问题，请将 z-index:1; 添加到 #leftbg。虽然您可以将 .entry 的 z-index 更改为 -1，但这可能会破坏其他内容，因为我对 tumblr 的布局不是很熟悉。

另一方面，我建议您禁用音乐播放器的自动播放功能。当用户可能不希望播放某些内容时，自动播放内容通常不是一件好事。