如何防止位置：相对项目显示在位置：固定项目之上？
我对我的博客风格有疑问。我想让标题栏
position:fixed
标题栏看起来像这样：
.blurbheader {
position:fixed;
padding:4px;
width: 100%;
height: 40px;
margin-bottom:30px;
color:#fff;
background:#cc0000;
font: 12px Helvetica, Arial, sans-serif;
line-height:1.3em;
}
.blurbheader a {color: #fff;}
/* creates the triangle */
.blurbheader:after {
content:"";
position:absolute;
bottom:-40px;
left:210px;
border:20px solid transparent;
border-top-color:#cc0000;
/* reduce the damage in FF3.0 */
display:block; width:0;
}
但是一旦我这样做了，我制作了 2 个导航栏，它们显示为
.blurb {
position:relative;
padding:10px;
margin:20px 0 0.5em;
color:#fff;
background:#000;
font: 11px Georgia, Geneva, "Times New Roman", times;
line-height:1.3em;
}
.blurb a {color: #fff;}
/* creates the triangle */
.blurb:after {
content:"";
position:absolute;
top:-30px; left:20px;
border:15px solid transparent;
border-bottom-color:#000;
/* reduce the damage in FF3.0 */
display:block; width:0;
}
当尝试使标题栏（blurbheader）固定时，当我滚动时，它看起来像这个：
右侧的框是导航栏，它不会在标题栏下方滚动。我该怎么办？
I have an issue regarding style my blog. I want to make the header bar
position:fixed
The header bar looks like this:
.blurbheader {
position:fixed;
padding:4px;
width: 100%;
height: 40px;
margin-bottom:30px;
color:#fff;
background:#cc0000;
font: 12px Helvetica, Arial, sans-serif;
line-height:1.3em;
}
.blurbheader a {color: #fff;}
/* creates the triangle */
.blurbheader:after {
content:"";
position:absolute;
bottom:-40px;
left:210px;
border:20px solid transparent;
border-top-color:#cc0000;
/* reduce the damage in FF3.0 */
display:block; width:0;
}
But as soon and I do that, 2 navigation bars I made, which are shown as
.blurb {
position:relative;
padding:10px;
margin:20px 0 0.5em;
color:#fff;
background:#000;
font: 11px Georgia, Geneva, "Times New Roman", times;
line-height:1.3em;
}
.blurb a {color: #fff;}
/* creates the triangle */
.blurb:after {
content:"";
position:absolute;
top:-30px; left:20px;
border:15px solid transparent;
border-bottom-color:#000;
/* reduce the damage in FF3.0 */
display:block; width:0;
}
When try to make the headerbar (blurbheader) fixed, when I scroll, it looks like this:
The box on the right hand side is the navigation bar, which won't scroll under the header bar. What do I do?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
这是一个 z-index 问题。
尝试将以下内容添加到您的
.blurbheader中，无论包含页面其余部分的内容（例如包装器），添加一个
应该可以解决问题的内容
It is a z-index issue.
try adding the following to your
.blurbheaderand whatever is holding the rest of the page, like the wrapper, add a
that should fix the problem