4

我绝对将 div 定位在相对容器中，但在 Firefox 中它完全忽略了它。

这是一个fidde：http: //jsfiddle.net/TThUZ/

我的 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. 为什么？以及如何解决？

4

3 回答 3

7

.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;。

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;
}
于 2013-08-28T03:27:13.370 回答
0

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

li { 
    display: block; 
}

我已经更新了你的FIDDLE。

于 2013-08-28T03:29:27.490 回答
0

我认为您在盒子模型中应用了自相矛盾的样式，因此您最终会遇到不可预测的行为。据我所知，您通过指定以下内容来触发此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;规则（** 表示添加）：http: //jsfiddle.net/TThUZ/4/

<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>，因为当元素显示为表格单元格时它不起作用。

于 2013-08-28T03:39:39.800 回答