Question

我希望在我的页脚图像上有版权文字，所以我创建了一个ID为“copyright”的段落。这是在我的css文件中：

.footer {
background: url(../images/footer_extend.png) repeat-x center;
overflow: hidden;
 }
.footer img {
    display:block;
    margin:0px auto;
    max-width:970px;
    height: 130px;
    overflow: hidden;
}
#copyright{
position:absolute;
color:#000;
bottom:1px;
left:46%;
}

因此，文本应居中，白色并位于页面的最底部。但对我来说，文本位于页面中间（不在底部）。为什么以及如何解决这个问题？

哦，这是我的html文件：

<div class="footer">
    <img src="images/footer.png" width="970" height="130" alt="" />
    <p id="copyright">© 2013</p>
</div>

Answer 1

您可能希望将position: relative添加到.footer

Answer 2

要使div#copyright相对于div.footer绝对定位，div.footer需要相对定位。

默认情况下，div为positioned statically，因此您需要明确指定相对位置：

.footer {
    position:relative;
    background: url(../images/footer_extend.png) repeat-x center;
    overflow: hidden;
}

下面的工作示例：

.footer {
  position: relative;
  background: url(../images/footer_extend.png) repeat-x center;
  overflow: hidden;
}

.footer img {
  display: block;
  margin: 0px auto;
  max-width: 970px;
  height: 130px;
  overflow: hidden;
}

#copyright {
  position: absolute;
  color: #000;
  bottom: 1px;
  left: 46%;
}

<div class="footer">
  <img src="images/footer.png" width="970" height="130" alt="" />
  <p id="copyright">© 2013</p>
</div>

View on JSFiddle

文本在页脚图像上

2 个答案: