Html 为什么跨度重叠

我有一个表，其中一个单元格包含两个跨距，第一个包含一个跨距和一个输入。我希望它们重叠（我使用它们创建在位编辑）。因此，我将父跨度定位设置为相对，并使用left:0将其位置设置为绝对。当我这样做时，第二个顶部跨距也会移动到单元格的左侧。为什么？如何修复（我希望内部跨距和输入重叠）

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

这是一把小提琴：

以下是HTML：

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

---

因为跨距和输入都是绝对定位的，所以没有什么可以添加到父跨距宽度。仅使输入处于绝对位置，并在编辑模式下使跨度隐藏，使输入可见：

.first {
    position:relative;
}
.first > input {
    position: absolute;
    display: none;
}
.first.edit > span {
    display: none;
}
.first.edit > input {
    display: inline-block;
    position: relative;
}

---

演示：

以下是您应该做的：

.first {
    position:relative;
}

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

    left: 0;
}

---

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

HTML:

以下是JSFIDLE：

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

HtML:

---

下面是JSFIDLE:

它不起作用。输入是第一个>跨距后的位置您希望第一个跨距与第一个>跨距重叠吗？是的，但是“有”跨距不位于输入后。因此，当我切换可见性时，我也会遇到同样的问题。只需删除css@NandhaKumar：这意味着输入不再与其同级跨度重叠。您希望输出为一个时间跨度hi和跨度在那里，以及下一个时间跨度hi和跨度在那里，对吗？但是，当输入可见时，会按下“there”键，所以在一个表中，它意味着所有的列都会变宽。这就是为什么我使用可见性（在输入不可见时保留空间）并需要positioning@IttayD明白，试试这把小提琴它会帮你的

.first {
    position:relative;
}

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

    left: 0;
}

  <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>

.first >input {  
   display: none;
}

<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>

.first >input {  
   display: none;
}