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

彗星！问题在于，在您的自定义页面上，标题是.leftbg的子标题，而在主页面上标题是其他所有内容的对等项。 #topbar的z-index为999，但这仅影响其对等体（在本例中为.entries）。要查看此内容，请检查自定义页面上的元素#topbar，然后检查主页。在html中，标题要么与其他条目一起放置（以便z-index：999将标题放在其他内容之上），要么作为.leftbg的子节点，其默认z-index为“auto”。

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

另外请注意，我建议您在音乐播放器上停用自动播放功能。当用户可能不希望播放某些内容时，自动播放内容通常不是一件好事。

Tumblr：内容重叠固定标题？

1 个答案: