css - 固定 header 保持在包装器顶部

Question

我正在尝试构建一个带有固定 header 的 Wordpress 站点。到目前为止，一切都很好。标题没问题，但包装器现在是问题所在。当我给 wrapper 一个 margin-top: 100px 时，标题将下降 100px，标题将保持在 wrapper 上方(见图)。

http://imgur.com/x1ssQhM .透明的白色是标题，它位于 wrapper 之上。

代码链接: http://jsfiddle.net/b1u83a7z/ 在这里输入代码 .在这里您可以看到 header 位于包装器的顶部，包装器的顶部边距应为 100 像素。

Answer 1

在 top 属性中添加标题样式以定义应放置在什么位置:

#top {
    top:0;   <-- Added
    width:100%;
    height:60px;
    margin:0 auto;
    background-color:rgba(255, 255, 255, 0.9);
    position:fixed;
    z-index:500;
    border-bottom:1px solid #DEDEDE;
}

Updated JSFiddle