2

情况

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吗？

4

4 回答 4

2

将包装器添加到绝对元素并使其相对，因此您将拥有类似 table-cell > relative wrapper > absolute 元素的东西

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

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

.foo, .rel {
    position: relative;
}

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

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

于 2013-07-15T15:02:43.987 回答
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 忽略表格单元格中的绝对定位和 Firefox 中表格单元 格 元素上的定位上下文

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

请参阅此内容以更深入地了解“表格”行为

http://jsfiddle.net/SYG5k/12

于 2013-07-15T15:29:33.863 回答
0

解决方法可能是使用宽度和高度为 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/

于 2013-07-15T15:04:05.293 回答
0

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

于 2013-09-19T14:29:56.683 回答