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

Question

我正在使用position:relativeandtop:-120px将标题背景图像移动到两个标题下方<div/>，效果很好。然后我必须将包装器<div/>和页脚设置<div/>为相对，并将它们都向上移动 120 像素以正确对齐。问题是页面底部的页脚下方现在有 120 像素的额外空间。有没有一种简单的方法可以删除那个空间？或者也许有不同的方式使用 CSS 和position属性来实现这个结果？这是我的网站：

http://ledvideowall.net

Answer 1

这是修复：

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

Answer 2

我要说#headerbg不需要存在，但是我看到您正在使用图像来保持页眉的高度/宽度比，因为页面尺寸减小了。
当我需要做这样的事情时，我根本不放置 " background-image" 在这种情况下，而是制作包装器position:relative和#headertop& #menubar position:absolute。这将顶部和菜单从流程中取出并background image完成工作。

.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;
}

Answer 3

您可以申请margin-bottom恢复相对位置导致的效果：

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

Answer 4

如果您有意将页脚向上移动 120 像素，则可以执行此操作以删除其下方的空白区域。

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