How do I prevent a position: relative item from showing up on top of a position: fixed item?

I have an issue regarding style my blog. I want to mak开发者_Python百科e 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?

It is a z-index issue.

try adding the following to your .blurbheader

 z-index:1;

and whatever is holding the rest of the page, like the wrapper, add a

z-index:0;

that should fix the problem