html - div 代码 css 导致页面上出现灰色区域

Question

所以我创建了一个基本上包含三个主要 div 的页面。页面顶部的第一个 div (.test_page - div #1) 是一张图片。第二个 div (.iframe_page - div #2) 是另一个站点的 iframe。第三个 div (.footer_coverup - div #3) 是另一张图片。

基本上，我希望顶部的 div (div #1) 覆盖 iframed 网站 (div #2) 的标题。我想让底部的 div (div #3) 覆盖 iframed 网站 (div #2) 的页脚。

我的 style.css 编码是:

.test_page {
  top: -60px;
  z-index: 9998;
}

.iframe_page {
  top: -230px;
}

.footer_coverup {
  padding-top: 250px;
  padding-bottom: 250px;
  width: 1577px;
  visibility: visible;
  background-image: url(/wp-content/uploads/2015/06/119.png);
  position: absolute;
  background-position: 50% 100%;
  background-repeat: no-repeat;
  top: -285px;
  z-index: 9999;
}

但是，页面底部现在有一个巨大的灰色空间，因为我使用代码 top: -230px 将 div #2 和 div #3 向上移动了。对于 div #2 和 top: -285px对于 div #3，如您在上面的代码中所见。

有谁知道如何向上移动一个 div 并让页脚跟随，而不是在页面底部有一个大的灰色空间？

感谢您的帮助!

Answer 1

而不是使用 top 定位元素。使用位置相对属性。

此外，如果您希望图片显示到页面末尾，检查后台属性:http://www.w3schools.com/cssref/pr_background-repeat.asp

希望对您有所帮助。谢谢!!!