新 div 不会出现在固定 header 下

Question

我有一个固定的 header 图像作为我的第一个 div，但显然我想在它下面有更多 divs/sections 来完成网页。

然而，当我尝试这样做时，我仍然只能看到 header 图像，而看不到图像下方的 div 位置。

有人知道为什么吗？这是 JSFiddle：http://jsfiddle.net/s5atv9c3/

我尝试使用类似的东西：

top: 0px; //for the fixed element
margin-top: 100%; //for the sub-divs in the container
position: relative/absolute; //for the sub-divs in the container

但是 none 他们工作了：/ 所以是的，感谢所有帮助

Answer 1

您可以执行以下操作。

给header固定高度

.header {
    background: url("http://i.imgur.com/GZJVpxU.jpg") 
    height: 400px; //fixed height
    position: fixed;
    width: 100%;
    background-size:contain;
}

将 header 高度的填充添加到包中

.packages{
   padding-top:400px;
}

Answer 2

是因为你给header position:fixed;所以，下一个div位置从top:0;开始，所以，他们躲回第一个fixed div.

要使 div 可见，将最高位置让给第二个 div 和 position:relative

.packages {
    padding: 40px 0;
    background: #FFFFFF;
    width: 100%;
    position: relative;
    top: 500px;
}

勾选Fiddle.

http://jsfiddle.net/s5atv9c3/2/

Answer 3

试试这个：

html, body {
    height: 100%;
    position: relative;
}

.wrapper {
    height: 100%;
}

header {
    position: relative;
    height: 100%;
}

Fiddle

Answer 4

按照您定义 .header 块的方式，它的高度将是屏幕高度的 100%。

如果您希望 .packages 出现在 .header 的正下方，请将 .packages 的上边距设置为 100%。

由于.header是固定的，需要设置top offset和z-index如下：

.header {
    top: 0;
    z-index: -1;
}

查看演示：http://jsfiddle.net/audetwebdesign/u8bt9wda/

新 div 不会出现在固定 header 下

New div's will not appear under fixed header

html

css

css-position