无法将页脚置于背景图片之上

Question

我只想让页脚显示在背景图片之上。有一个背景图像，除了底部 2 厘米外，它是公司全屏的颜色和徽标。我想要带有 link 的简单文本。我自己会这样做，但无法将文本置于背景颜色或背景图像之上。这是 HTML:

<link href="voorblad.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.poptrox-1.0.js"></script>
<script type="text/javascript" src="static_init.js"></script>
</head>
<body>
<div id="bg1"></div>
     <img alt="full screen background image" src="gallery/voorblad.jpg" id="full-screen-background-image" /> 
  <div id="wrapper">
    </div>
    <footer>
    <p><h2>Framing your memories. Enter here. </h2></p>
    </footer>
</body>
</html>

这是我的 css:

@charset "utf-8";
/* CSS Document */

html, body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  overflow-y:hidden;

}

#full-screen-background-image {
  z-index: 2;
  min-height: 90%;
  min-width: 1024px;
  width: 100%;
  height: auto;
  position: relative;
  top: 0;
  left: 0;
}

#wrapper {
  position: relative;
  width: 800px;
  min-height: 400px;
  margin: 100px auto;
  color: #333;
}
#bg1 {
    min-width: 1255px;
    width: 100%;
    height: 1090px;
    background: url(images/bg1.jpg) top center no-repeat;
    position: absolute;
    top: 0;
    z-index: 1;
}

#footer { 
    position:relative;
    bottom:0;
    z-index: 3;
}

Answer 1

要设置页脚的样式，请确保去掉 #，除非元素上有 ID。正确的 css 应该是这样的：

 footer { 
position:relative;
bottom:0;
z-index: 3;
}

Answer 2

一些基本的东西：

空 bg1 和包装 div 的用途是什么？
ID 为 'footer' 的元素有 css，但 html 中没有这样的元素。
在 p 标签中包装 h2 标签在语义上是不正确的。

快速清理给我们这样的结果：

<body>
    <div id="full-screen-background-image"></div> 
    <div id="footer">
        <h2>Framing your memories. Enter here. </h2>
    </div>
</body>

尝试添加一个有效的 jsfiddle 以便人们可以更好地帮助您。我无法访问您的本地图像，所以我使用了红色背景。请参阅此 fiddle 以了解将一个项目放置在另一个项目之上的基本想法：https://jsfiddle.net/cp35y75z/1/

如果您使用 position: absolute 而不是 position: relative 元素将不会在 DOM 中占据 space，这意味着页脚将不会出现白色 space本来就是。

无法将页脚置于背景图片之上

Can't get the footer on top of background image

css

z-index

footer