Question

我有一个固定的标题图片作为我的第一个div，但后来我显然希望在它下面有更多的div /部分来完成网页。

然而，当我尝试这样做时，我仍然只能看到标题图像，而不是它下面的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

但他们都没有工作：/所以是的，所有的帮助都表示赞赏

Answer 1

您定义.header块的方式，其高度为屏幕高度的100％。

如果您希望.packages显示在.header下方，请将.packages的上边距设置为100％。

由于.header已修复，您需要设置顶部偏移量和z-index，如下所示：

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

请参阅演示：http://jsfiddle.net/audetwebdesign/u8bt9wda/

Answer 2

你可以做以下事情。

为标题提供固定高度

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

将标题高度的填充添加到包

中

.packages{
   padding-top:400px;
}

Answer 3

这是因为你给了标题position:fixed;所以，下一个div位置从top:0;开始所以，它们会隐藏回第一个固定的div。

使div可见给第二个div和position的相对位置：relative

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

检查Fiddle.

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

Answer 4

试试这个：

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

.wrapper {
    height: 100%;
}

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

Fiddle

新的div不会出现在固定标题下

4 个答案: