Html CSS粘性标题

我已经在我的主页上添加了一个粘性标题，但是粘性标题似乎位于页面上其他内容的后面，所以当我向下滚动页面时，图像和文本位于标题的顶部，有没有办法停止

这是我的密码：

<style>
/* Reset body padding and margins */
body
{
    margin: 0;
    padding: 0;
}

/* Make Header Sticky */
#header_container
{
    background: #827878;
    border: 1px solid #666;
    height: 60px;
    left: 0;
    position: fixed;
    width: 100%;
    top: 0;
}

#header
{
    line-height: 60px;
    margin: 10 auto;
    width: 940px;
    text-align: left;
    font-size: 26px;
    color: #f5f5f5;
    line-height: 28px;
    margin-bottom: 14px;
    font-family: 'Source Sans Pro',sans-serif;
}

/* CSS for the content of page. I am giving top and bottom 
   padding of 80px to make sure the header and footer 
   do not overlap the content. */
#container
{
    margin: 0 auto;
    overflow: auto;
    padding: 80px 0;
    width: 940px;
}

#content
{
}

/* Make Footer Sticky */
#footer_container
{
    background: #eee;
    border: 1px solid #666;
    bottom: 0;
    height: 60px;
    left: 0;
    position: fixed;
    width: 100%;
}

#footer
{
    line-height: 60px;
    margin: 0 auto;
    width: 940px;
    text-align: center;
}
</style>


<!-- BEGIN: Sticky Header -->
<div id="header_container">
    <div id="header">
        Header Content
    </div>
</div>
<!-- END: Sticky Header -->

/*重置正文填充和边距*/
身体
{
保证金：0；
填充：0；
}
/*使标题变粘*/
#集箱
{
背景:"827878 ;；
边框：1px实心#666；
高度：60px；
左：0；
位置：固定；
宽度：100%；
排名：0；
}
#标题
{
线高：60px；
保证金：10美元；
宽度：940px；
文本对齐：左对齐；
字号：26px；
颜色：#F5；
线高：28px；
边缘底部：14px；
字体系列：“源Sans-Pro”，无衬线；
}
/*页面内容的CSS。我给了你全部
填充80px以确保页眉和页脚
不要重叠内容*/
#容器
{
保证金：0自动；
溢出：自动；
填充：80px0；
宽度：940px；
}
#内容
{
}
/*使页脚粘*/
#页脚容器
{
背景：#eee；
边框：1px实心#666；
底部：0；
高度：60px；
左：0；
位置：固定；
宽度：100%；
}
#页脚
{
线高：60px；
保证金：0自动；
宽度：940px；
文本对齐：居中；
}
标题内容

在标题中添加：

position:absolute;
z-index:9999;

---

这将使它超越一切

只需使用z-index参数即可。 例如z索引：2（表示层的顺序） 它仅适用于使用位置的元素：绝对、相对或固定

例如：

---

从iphone发送添加此代码。。在#页眉#容器和#页眉样式中添加z-index:1000和z-index:1001

 #header_container 
      { 
        position:fixed;
        top:0px;
        left:0px;
        z-index:1000;
       }

 #header{
      z-index:1001;
      }

身体{
边际：0px；
背景：#000；
}
.标题续{
宽度：100%；
位置：固定；
顶部：0px；
}
.标题{
高度：50px；
背景：#f0；
边框：1px实心#CCC；
宽度：960px；
保证金：0px自动；
}
.内容{
宽度：960px；
背景：#f0；
边框：1px实心#CCC；
高度：2000px；
利润率：70像素自动；
}

像这样的吗？将z-index:9999添加到标题容器。OP使用“粘性”标题，

位置：绝对将破坏该功能。他们已经有了
位置：固定所以
z-index
是唯一需要的东西。谢谢，这起作用了，但是我的菜单是唯一保持在顶部的东西。这是我的菜单CSS
menu_sticky{float:left；width:100%；top:200px；position:absolute；z-index:1001；background:#f9f9url（../images/menu shadow.png）repeat-x left-bottom；}
为什么不添加
z-index:2001？它比它好1000倍你可以做的另一件事。。。实际上是将标题标记移动到页面底部。当您向下移动标记时，东西自然会堆积起来。