html - 为什么跨度重叠

Question

我有一个包含两个跨度的单元格的表格，第一个包含跨度和输入。我希望它们重叠(我用它们来创建就地编辑)。所以我将父 span 定位设置为 relative 并将它们的位置设置为 absolute with left: 0。当我这样做时，第二个顶部 span 也移动到单元格的左侧。为什么？如何修复(我希望内部跨度和输入重叠)

更新:请注意，输入用于就地编辑，因此其他跨度需要放在它之后。否则，当我删除可见性样式(通过切换类)时，它将覆盖第二个跨度。我更新了 fiddle ，所以它显示了跨度和输入。

这是一个 fiddle :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;
}

Answer 1

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

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/