css - 为什么 CSS 定位与此表的行为不符？

Question

我对下面的 HTML 的期望是，我会看到woo1并woo2重叠，同时hiiii保持在自己的单元格中，远离 woos。然而，一切都运行在一起。为什么？

http://jsfiddle.net/T4Jgx/

<table>
    <tr>
        <td style="position:relative">
            <span style="position:absolute">woo1</span>
            <span style="position:absolute">woo2</span>
        </td>
        <td>
            <span>hiiii</span>
        </td>
    </tr>
</table>

编辑： 奇怪。当我从 中删除样式时woo2，它似乎可以工作。当我从 中删除它时woo1，woo2重叠hiiii。大夫……？

Edit2： 对于 Reconstruct，您的评论与表格有关，那么如何可以重现完全相同的效果呢？

<div>
    <span style="position:relative">
        <span style="position:absolute">woo1</span>
        <span style="position:absolute">woo2</span>
    </span>
    <span>hiiii</span>
</div>

Edit3： Arrghh ......我相信我明白发生了什么。通过向两个跨度添加绝对定位，它们从控制流中移除并且第一个 TD 被折叠。我正在考虑删除这个问题，但也许有人可以确认我刚才所说的并得到答案？

Answer 1

TD将您的内容包装在 a 中DIV并转移position:relative到其中。

<td>
    <div style="position:relative">
            <span style="position:absolute">woo1</span>
            <span style="position:absolute">woo2</span>
    </div>
</td>