Question

我正忙于创建一个网站，最好需要有一个覆盖整个屏幕的背景图片，但当访问者向下滚动时，其他内容会出现。

到目前为止，我开始创建2个div（我称之为＃container_page1和＃container_page2）。这是第一个div的css：

#container_page1 { 
    background-image:url(images/background.jpg); 
    background-size: cover;
    position:absolute;
    margin:0px;
    width:100%;
    height:100%;
}

这是第二个div的css：

#container_page2 {
    background-color: #F00;
    height: 2000px;
    width: 1000px;
    margin-right: auto;
    margin-left: auto;
}

问题是第二个div的内容出现在第一个div下面，显然是由于第一个div是绝对定位的事实。

当然，我可以将第二个div的内容放在较低的边距或填充处，但由于屏幕分辨率不同，这样做不会很好。

在这里你可以看到我到目前为止做了什么：http://kmnew.kadushimarketing.com/index.php。您还会看到链接到第二个div中的锚点的“了解更多”按钮。

有没有人建议让第二个div从第一个div结束开始？

Answer 1

将两个div包装成一个父div。然后给那个父div一个绝对位置，并在该div内将两个内部div放在彼此旁边。

Answer 2

如果你需要每个部分都拥有它自己的特殊背景并且完全符合浏览器的大小，为什么绝对的位置呢？

使用如下样式：

body, html{
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}

section{
    width:100%;
    height:100%;
    background-image:url(images/background.jpg); 
    background-size: cover;
}

然后将所有内容div相对定位，您应该能够维护浏览器大小的背景并让这些部分按顺序堆叠。

如果要控制部分内容的位置，可以使用以下结构：

<section>
    <div class="content">
        Section content goes here
    </div> 
</section>

使用相应的CSS：

section .content{
    width: 500px;
    margin:0 auto;
}

将内容修复为500px的宽度并将其置于屏幕中心。希望这有帮助！

在绝对div之后放置div

2 个答案: