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

alt text http://imageshack.us/m/833/6351/fixedproblem.png

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

Answer 1

这是一个z索引问题。

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

 z-index:1;

以及保留页面其余部分的内容，如包装器，添加

z-index:0;

应解决问题

如何防止仓位：相对项目显示在仓位之上：固定项目？

1 个答案: