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;
 }

某些内容进入固定标题的问题

1 个答案: