html - 为什么跨度重叠

我有一个表格，其单元格包含两个范围，第一个包含范围和输入。我希望它们重叠（我使用它们来创建就地编辑）。因此，我将父范围的位置设置为相对，并将其位置设置为绝对值，并使用left：0。这样做时，第二个顶部范围也移至单元格的左侧。为什么？如何解决（我希望内部跨度和输入重叠）

更新：请注意，该输入用于就地编辑，因此另一个跨度需要放置在其后。否则，当我删除可见性样式（通过切换类）时，它将覆盖第二个跨度。我已经更新了小提琴，因此它显示了bot的跨度和输入。

这是一个小提琴：http://jsfiddle.net/jvyLtr82/5/

这是HTML：

<table>
    <tbody>
        <tr>
            <td>
                <span class="first">
                    <span>hi</span>
                    <input value="hi"/>
                </span>
                <span> there</span>
            </td>
        </tr>
    </tbody>
</table>

CSS：

.first {
    position:relative;
}

.first > * {
    position: absolute;
}
.first > span {

    left: 0;
}

.first > input {
    left: 0;
}

最佳答案

如果您不想在输入字段中输入数据，请尝试以下操作

HTML：

  <table>
    <tbody>
        <tr>
            <td>
                <span class="first">
                    <span onclick='$(this).hide().next().show()'>hi</span>
                    <input value="hi" onclick='$(this).hide().prev().show()'/>
                </span>
                <span>there</span>
            </td>
        </tr>
    </tbody>
</table>

CSS：

.first >input {
   display: none;
}

这是JSFiddle：http://jsfiddle.net/jvyLtr82/8/

如果要在输入字段中输入数据，请尝试以下操作

HtML：

<table>
    <tbody>
        <tr>
            <td>
                <span class="first">
                    <span onclick='$(this).next().toggle().next().toggle()'>switch</span>
                    <span >hi</span>
                    <input value="hi"/>
                </span>
                <span>there</span>
            </td>
        </tr>
    </tbody>
</table>

CSS：

.first >input {
   display: none;
}

这是JSFiddle：http://jsfiddle.net/jvyLtr82/10/

关于html - 为什么跨度重叠，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28507683/