css - 为什么 "display: table-cell"坏了 "position: absolute"

Question

我遇到了一个奇怪的问题。我用DIV作为容器，把一张图片放到这个DIV里面。我希望这张图片垂直对齐到底部。以下代码有效。

#banner { 
  width: 700px; 
  height: 90px; 
  top: 60px; 
  left: 178px; 
  overflow: hidden; 
  text-align: center; 
  display: table-cell; 
  vertical-align: bottom; 
  position: relative;
}

<div id="banner">
  <img src="http://www.google.de/intl/de_de/images/logo.gif"/>
</div>

但是如果我将 css 代码“position: relative”更改为“position: absolute”，图像将无法再与底部对齐。这是 Firefox3 的错误吗？我该如何解决这个问题？

我目前的解决方案是:

<div id="banner">
  <table width="100%" height="100%"><tr><td valign="bottom" align="center">
  <img src="http://www.google.de/intl/de_de/images/logo.gif"/>
  </td></tr></table>
</div>

但我不喜欢这个解决方案。

Answer 1

简答: 改变

top: 60px; 

到

bottom: 60px;

长答案:

声明 position: absolute 将您的元素从它所在的位置取出，并将其放置在相对于未声明为静态的最内层元素的位置。不再参与任何其他元素的对齐，因此它不再充当表格单元格(声明无效)。此外，诸如 top: 10px 之类的声明意味着将其放置在距包含元素顶部那么远的位置。

将元素声明为 position: relative 使得声明如 top: 10px 意味着“将元素从当前位置的顶部移动 10px”。相对于声明的元素可能会与其他元素重叠，但您应该记住，原始位置仍然决定其他元素的排列。

我希望这能回答您的问题。