css - 某些内容移入固定 header 的问题

Question

我有固定的页眉和页脚，当我为 div 标题添加功能区等元素时，功能区的一部分会溢出到页眉而不是页脚。

相关元素可以在以下位置找到: http://mikesbaum.com/plan9alehouse/index.html

这是标题/导航 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;
}

我在以下位置找到了功能区教程:http://css-tricks.com/snippets/css/ribbon/但仍然找不到解决方案。

Answer 1

您需要将 z-index:1 添加到您的 header 以避免功能区在其上方流动:

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