css - 如何防止位置 : relative item from showing up on top of a position: fixed item?

Question

我的博客风格有问题。我想制作标题栏

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) 时，当我滚动时，它看起来像这样:

右侧的框是导航栏，它不会在标题栏下滚动。我该怎么办？

Answer 1

这是一个 z-index 问题。

尝试将以下内容添加到您的 .blurbheader

 z-index:1;

和任何包含页面其余部分的东西，比如包装器，添加一个

z-index:0;

应该可以解决问题