css - 为什么我的消失在另一个后面？

Question

长话短说，我正在创建一个网页，它<div>的顶部有一个固定的包装器，下面有少量的“内容”，您可以从中上下滚动。

问题是我的“内容”<div>不是从包装器的底部开始，<div>而是在它下面的页面上方

这是一个例子：jsfiddle

#wrapper {
    background-color: #327bb7;
    margin: 0 auto;
    position:fixed;
    color:#FFFFFF;
    line-height: 100px;
    width:100%;
    height:100px;
}

Answer 1

因为：

position:fixed;

添加例如：

position: relative;

到#content.

或者

position: absolute;
top: 100px;

如果您想在固定区域下方附加内容，则为最后一个。

Answer 2

添加padding-top : 100px 或任何你想要的

但基本上填充将是包装器的高度。

#content {
    padding-top : 100px;
}

Answer 3

根据您的布局要求，您可能想尝试这样的事情。

document.getElementById("content").style.marginTop = document.getElementById("wrapper").style.height;