Css 某些内容移动到固定标题时出现问题

我有一个固定的页眉和页脚，当我为div页眉添加诸如ribbon之类的元素时，ribbon的一部分会溢出到页眉而不是页脚中

有关元素可在以下位置找到：

以下是标题/导航CSS：

    header {
    position: fixed;
    top:0px;
    left:0px;
    width: 100%;
    height: auto;
    padding: 0px;
    border-bottom: 4px solid #291e13;
    background:url(../../img/dark_wood_texture.jpg);
    background-color:#FFF;
    -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4); 
    -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
  }

  nav {
   list-style:none;
   text-align:center;
    font-family: Conv_goudy_bookletter_1911-webfont;
    font-weight:bold;
}
  nav li {
  display: inline;
}
nav a {
display: inline-block;
padding: 10px;
    }

以及丝带：

.ribbon {
 font-size: 16px !important;
 /* This ribbon is based on a 16px font side and a 24px vertical rhythm. I've used em's       to position each element for scalability. If you want to use a different font size you may have to play with the position of the ribbon elements */
 width: 50%;
 position: relative;
 background: #ba89b6;
 color: #fff;
 text-align: center;
 padding: 1em 2em; /* Adjust to suit */
 margin: 2em auto 3em; /* Based on 24px vertical rhythm. 48px bottom margin - normally     24 but the ribbon 'graphics' take up 24px themselves so we double it. */

}
.ribbon:before, .ribbon:after {
 content: "";
 position: absolute;
 display: block;
 bottom: -1em;
 border: 1.5em solid #986794;
 z-index: -1;
}
.ribbon:before {
 left: -2em;
 border-right-width: 1.5em;
 border-left-color: transparent;
}
.ribbon:after {
 right: -2em;
 border-left-width: 1.5em;
 border-right-color: transparent;
}
 .ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
 content: "";
 position: absolute;
 display: block;
 border-style: solid;
 border-color: #804f7c transparent transparent transparent;
 bottom: -1em;
}
 .ribbon .ribbon-content:before {
 left: 0;
border-width: 1em 0 0 1em;
}
.ribbon .ribbon-content:after {
 right: 0;
 border-width: 1em 1em 0 0;
}

---

我在中找到了功能区教程，但仍然无法找到解决方案。

您需要在

标题中添加
z-index:1
，以避免功能区在其上方流动：

 header {
    // your css
    z-index:1;
 }

你能提供HTML吗？您使用的是哪种浏览器？如果你能提供一个js提琴，这将有助于回答者快速找出问题。非常感谢！这是因为我在ribbon CSS中有一个负z索引吗？ribbon本身没有定义任何
z索引，只有CSS
：before
和
：after
类（它们相应地在标题下方流动）。