WordPress相对定位和页面高度CSS问题

我正在使用

position:relative

和

top:-120px

将标题背景图像移动到两个标题

下方，效果很好。然后，我必须将包装器

和页脚

设置为相对，并将它们向上移动120像素以正确对齐。问题是页面底部的页脚下现在有120像素的额外空间。有没有一个简单的方法来消除这个空间？或者，是否有一种使用CSS和

position

属性的不同方法来实现此结果？这是我的网站：

以下是修复方法：

.wrapper {
    top: 0;
}
.site-header {
    margin-bottom: -120px;
}    
footer[role="contentinfo"]{
    top:0;
}

---

您可以应用

margin bottom

来恢复相对位置造成的影响：

footer[role="contentinfo"]{
    margin-bottom: -120px;
}

---

如果您有意将页脚向上移动120像素，可以这样做以删除页脚下方的空白

footer[role="contentinfo"] {
    margin-bottom: -120px;
}

---

我想说的是，

#headerbg

不需要存在，但是我看到您正在使用图像来保持页眉的高宽比，因为页面尺寸变小了。
当我需要这样做时，在这种情况下，我根本不定位“

背景图像

”，而是将包装器定位为：相对和

标题栏

&

菜单栏

位置：绝对

。这将使顶部和菜单脱离流程，并使

背景图像

正常工作

.site-header {
  position:relative;
  ...
}
#headertop {
 position:absolute;
 top:0;
 left:0;
 width:100%;
 z-index:1;
...
}
#menubar {
 position:absolute;
 top:80px;
 left:0;
 width:100%;
 z-index:1;
 ...
}
#headerbg {
 display:block;
 height:auto;
 width:100%;
 /*
 position: relative;
 top: -120px;
 z-index: 0;
 */
}
#headerbg img {
 display:block;
 width:100%;
 height:auto;
}

---

那不行。它只是将页脚向下移动到底部，但是在包装div下面和页脚上面有120像素的空间。这不是偶然的-我说我修改了css，使我的问题中的所有内容都向上移动。很好！是的，这是一个简单的解决方案。：）谢谢你的另一种方法。我将在未来几天在这里试一试，看看我是否能让它像那样工作。