Question

我绝对在一个相对容器内放置一个div，但在firefox中它完全忽略它。

我的HTML：

<div class="main">
    <ul>
        <li>
            <a>
                Text
            </a>
            <div class="sub">
                Sub
            </div>
        </li>
    </ul>
</div>

CSS：

ul { display: table; }
li { display: table-cell; width: 300px; background: #ddd; padding-left: 50px; position: relative; }
.sub { position: absolute;  left: 0; }

.sub不遵循li的相对位置。为什么？以及如何解决它？

Answer 1

.sub正在做它应该做的事情。我相信它必须与你的display: table-cell;。请检查此链接以进行验证：http://css-tricks.com/absolutely-position-element-within-a-table-cell/

[...]表格单元格元素不会采用这些位置值。和因此，您也无法在上下文中绝对定位元素这些要素中的任何一个。[...]

上面的文章提出了以下修复，在表格单元格中添加和元素以使用定位。不是很语义，但它有效。

http://jsfiddle.net/TThUZ/6/

请注意使用相对定位的其他div，而不是li使用display: table-cell;的{{1}}。

HTML 的

<div class="main">
    <ul>
        <li>
            <div class="table-cell-fix">
                <a>
                    Text
                </a>
                <div class="sub">
                    Sub
                </div>
            </div>
        </li>
    </ul>
</div>

现在只需要一点额外的CSS。将position: relative;从li移至新div。我还将您li上的填充移动到了新的div。

CSS

ul {
    display: table;
}
li {
    display: table-cell; 
    width: 300px; 
    background: #ddd; 
}
.sub { 
    position: absolute;
    left: 0; 
    top: 0;
}
.table-cell-fix {
    position: relative;
    padding-left: 50px;
}

Answer 2

尝试将LI的显示设为block，而不是table-cell

li { 
    display: block; 
}

我已更新了您的FIDDLE。

Answer 3

我认为你在盒子模型中应用了与自己相矛盾的样式，所以你最终会遇到不可预测的行为。据我所知，您通过在display: table;上指定<ul>来触发此操作：

'position：relative'对table-row-group的影响， table-header-group，table-footer-group，table-row，table-column-group， table-column，table-cell和table-caption元素未定义。（http://www.w3.org/TR/CSS21/visuren.html#propdef-position）

有一个表尝试在http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo定义推荐的用户代理行为，但我无法确定哪个适用于您的示例。

如果我从CSS中删除了表规则，则绝对位置元素似乎与包装它的<li>相对应。

修改

我提出的最简单的解决方案是用<li>包装每个<div>的内容，然后应用position: relative;规则（**表示添加）：{ {3}}

<div class="main"> <ul> <li> **<div class="test">** <a> Text </a> <div class="sub"> Sub </div> **</div>** </li> </ul> </div>

和

ul { display: table; } li { display: table-cell; width: 300px; background: #ddd; padding-left: 50px; } **.test { position: relative; }** .sub { position: absolute; left: 0; }

我很确定你可以从<li>中删除定位规则，因为当元素显示为表格单元格时它没有效果。

为什么位置：相对;不在firefox上工作？

3 个答案: