Question

我只想让页脚出现在背景图像的顶部。除了底部2厘米外，还有一个背景图像是公司全屏的颜色和徽标。在那里我想要一个带链接的简单文本。将自己这样做，但不能将文本放在背景颜色或背景图像之上。这是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标记在语义上是不正确的。

快速清理给我们这样的事情：

_decorator

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

如果使用position：absolute而不是position：relative，则元素不会占用DOM中的空间，这意味着页脚最初不会有空白区域。

无法将页脚放在背景图像的顶部

2 个答案: