当"position:absolute"时为什么"display:table-cell"被破坏

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代码"的位置是:相对"到"的位置是:绝对"时,图像无法对齐到底了.这是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从当前位置的顶部移开'.声明的元素可能与其他元素重叠,但您应该记住原始位置仍然决定了其他元素的排列.

我希望这能回答你的问题.