問題與某些內容移動到固定標題

Question

我有一個固定的頁眉和頁腳，並且當我添加一個元素如功能區的div標題部分的功能區溢出到頁眉但不是頁腳時。

所討論的元件，可以發現： http://mikesbaum.com/plan9alehouse/index.html

這裏是頁眉/ NAV 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; 
}