为啥“位置：绝对”时“显示：表格单元”会损坏

Posted 2023-03-05

【中文标题】为啥“位置：绝对”时“显示：表格单元”会损坏

【英文标题】：Why "display: table-cell" is broken when "position: absolute"为什么“位置：绝对”时“显示：表格单元”会损坏

【发布时间】：2010-12-09 04:50:21

【问题描述】：

我遇到了一个奇怪的问题。我使用 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  ><tr><td valign="bottom" align="center">
  <img src="http://www.google.de/intl/de_de/images/logo.gif"/>
  </td></tr></table>
</div>

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

【参考方案1】：

简短回答： 改变

top: 60px; 

到

bottom: 60px;

长答案：

声明position: absolute 将您的元素从它所在的任何地方取出，并将其相对于未声明为静态的最里面的元素放置。 in 不再参与任何其他元素的对齐，因此它不再用作表格单元（声明无效）。此外，top: 10px 之类的声明意味着将其放置在距包含元素顶部那么远的地方。

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

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

【讨论】：

因为我想DIVs可以重叠。如果 DIV 有相对位置，它们就不能重叠，可以吗？

【参考方案2】：

你也可以尝试设置一个 position:relative;容器，这使得横幅（#banner 位置：相对；和 img 位置：绝对）然后将绝对位置设置为底部：0，将其与容器底部对齐。如果是整个页面，只需将容器的宽度和高度设置为 100%，并在 body 或 div 上移除多余的 padding/margin。

【讨论】：

谢谢，很高兴知道“bottom:0”可以使其与底部对齐。如何使图像居中对齐？我有一个将文本保留在中间的解决方案：插入一个内部 DIV 并设置其“行高：height_of_outer_div”。另一件事，我想在运行时更改它。如果我必须为这三个位置编写完全不同的棘手 css 代码，那就不太好。

它在工作网页上吗？要让它显示在中间，只需设置 margin:0 auto;，元素可能需要有一个宽度，这取决于它的容器元素。使图像与 div 对齐……这就是技巧部分。正如您所尝试的那样，有一个 css 表格技巧和线路技巧。如果元素的宽度始终相同，您也可以只填充元素，但通常情况并非如此。