当父级为“table-cell”时，“绝对”子级与“相对”父级无关-仅 Firefox答案

【问题标题】：`absolute` child does not relate to `relative` parent when parent is `table-cell` - only firefox当父级为“table-cell”时，“绝对”子级与“相对”父级无关-仅 Firefox
【发布时间】：2013-07-13 11:37:04
【问题描述】：

情况

html:

<div class="container">
   <div class="parent">
      <div class="child">x</div> 
   </div>
</div>

css:

.container {
   display: table;
}

.parent {
   display: table-cell;
   position: relative;
}

.child {
   position: absolute;
   right: 0;
}

我的期望：

.child 应位于.parent 的右边缘。在 Chrome 中工作。

我在 Firefox 中得到的：

.child 位于最近的“非静态”父级的右边缘，该父级没有display: table-cell。

小提琴

http://jsfiddle.net/SYG5k/2

问题

为什么display: table-cell 会影响子元素的定位，或者，为什么position: relative 会在table-cell 元素上被忽略？如果我依赖table-cell，我可以解决这个问题吗？

【问题讨论】：

position: absolute forces display: block related question & w3.org article
@Bondye，但我只在子元素上设置了position: absolute，display: block 实际上是我想要的。

标签： css css-position css-tables

【解决方案1】：

您需要将position: relative; 放在您的父母中。

所以在您问题的代码中添加position: relative; 到.container

或者在你的 jsfiddle 中添加 position: relative; 到 .parent

.parent {
    height: 150px;
    width: 450px;
    display: table;
    margin-top: 400px;
    background: #bbb;
    position:relative;
}

关于您的问题“为什么”：它不再是“块”级元素。它是一个表格单元格，因此定位将以不同的方式表现（在本例中，使用 firefox）。

看到这个understand deeper about 'tables' behaviors

http://jsfiddle.net/SYG5k/12

【讨论】：

【解决方案2】：

为你的绝对元素添加一个包装器并使其相对，这样你就会有类似表格单元格 > 相对包装器 > 绝对元素的东西

http://jsfiddle.net/SYG5k/13/

<div class="rel">
    a 
    <div class="absolute">x</div>
</div>

.foo, .rel {
    position: relative;
}

这是一种解决方法，我无法解释为什么它不能正常工作。也许其他人会为你回答这个问题

编辑：我的错误是包装器应该将所有内容包装在单元格中，这是我最初想要编码的内容，更像是一个错字。我更新了上面的小提琴

【讨论】：

不幸的是，如果有超过 1 个绝对子级，则使用包装器 f*cks：jsfiddle.net/SYG5k/6
什么意思？我看到顶部的b。你能解释一下吗，我在mac上最新的FF上看过

【解决方案3】：

解决方法可能是使用宽度和高度为 100% 的内部 div，并将其设置为 position:relative;

HTML：

<div class="parent">      
<div class="cell foo">
    <div class="cellInner">
        a
        <div class="absolute">x</div>
    </div>
</div>

CSS：

.cellInner{
position:relative;
width:100%;
height:100%;
}

更新的 JS Fiddle：http://jsfiddle.net/SYG5k/11/

【讨论】：

我可能会指出 Huangism 的方法并不能完全解决问题，因为它的显示方式与您原来的示例不同。x 现在略低于 a。包装器需要包装 .parent div 内的所有内容。
这种方法对于多个绝对定位元素也没有问题。

【解决方案4】：

当我遇到这个 FF 问题时，当用户将鼠标悬停在表格的每一行上时，我正在添加一个弹出菜单。基于上面非常有用的信息，我最终将一个 div 包装器 inside 放置在我希望绝对定位的弹出菜单所在的每一行的表格单元格中，并将其显示属性设置为相对。然后，我的 JS 在滚动每一行时将绝对位置菜单 inside 添加到 div - 当然，它必须是相对定位的 div 的子级。请注意，div 将收缩包装 td 的内容，而不是像我预期的那样填充 td，但无论如何，您都有一个相对上下文，您可以在绝对定位的子元素上使用 top 和 left 将其准确定位到您的位置想要它相对于表格单元格。

【讨论】：