html - 重叠重叠的原因

  显示原文与译文双语对照的内容
0 0

我有一个 table,它有一个包含两个span的单元格,第一个包含一个 span,然后输入。 我想要这些重叠( 我使用它们来创建一个 edit-in-place ) 。 所以我将父 span 定位设置为 relative,并将它们的位置设置为 absolute: 0.当我这样做时,第二个顶点 span 也移动到单元格的左侧。 为什么如何修复( 我希望内部 span 和输入重叠)?

更新:注意输入用于 edit-in-place,所以其他 span 需要在它之后定位。 否则,当我删除可以见性样式( 通过切换类) 时,它将覆盖第二个 span 。 我已经更新了小提琴,所以它显示了 span 和输入。

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

时间: 原作者:

0 0

以下是你应该做的:


.first {
 position:relative;
}

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

 left: 0;
}

0 0

因为 span 和输入都是绝对定位的,所以没有什么可以添加到父 span 宽度。 只使输入位置绝对和处于编辑模式,使 span 隐藏并输入可见:


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

演示:http://jsfiddle.net/jvyLtr82/7/

原作者:
...