当父亲是`table-cell`时，`absolute` child与`relative` parent无关 - 只有firefox

Question

情况

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位于最近的＆＃34;非静态＆＃34;的右边缘。没有display: table-cell的父母。

小提琴

http://jsfiddle.net/SYG5k/2

问题

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

Answer 1

为你的绝对元素添加一个包装器并使其相对，所以你会有像table-cell＆gt;这样的东西。相对包装＆gt;绝对元素

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

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

.foo, .rel {
    position: relative;
}

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

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

Answer 2

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

因此，在您问题的代码中，将position: relative;添加到.container

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

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

相关：Firefox ignores absolute positioning in table cells和Positioning context on table-cell element in Firefox

关于你的质疑'为什么'：它不再是一个'块'级元素。它是一个表格单元格，因此定位将以不同的方式运行（在这种情况下，使用firefox）。

请参阅understand deeper about 'tables' behaviors

http://jsfiddle.net/SYG5k/12

Answer 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小提琴：http://jsfiddle.net/SYG5k/11/

Answer 4

当我遇到这个FF问题时，我正在添加一个弹出菜单，该菜单出现在表的每一行上，当用户将鼠标放在它上面时。基于上面非常有用的信息，我最终在每行中的表格单元格中放置了一个div包装 ，我希望我的绝对定位的弹出菜单位于其中，并将其display属性设置为relative。然后我的JS在div中添加了绝对位置菜单 div 当每一行被滚动时 - 它当然必须是相对定位的div的子项。注意div将收缩包装td的内容而不是按照我的预期填充td，但不管怎么说，你有一个相对的上下文，你可以在绝对定位的子元素上使用top和left来准确定位它想要表格单元格。