javascript - 在 div、td 元素上覆盖 div "edit image"

Question

我在可编辑的表格中有一个 div 元素或 td 元素，即您单击该元素，然后弹出窗口允许您编辑文本。我希望能够在可编辑元素的左上角添加一个“编辑图像”。目前，我所拥有的只是当您滚动元素时，背景变为黄色以指示。想要弹出更好的图像。尝试使用绝对 div，但不确定我的样式设置是否正确，因为它无法正常工作。

<td>
   <div style="position:absolute; display:inline"><img src="/edit.png"/></div>
   <p>This would be the normal text that is editable</p>
</td>

我会在翻转时使用 jQuery 添加 div，并带有一个前缀。

Answer 1

将您的“编辑图像”放在内容之后，这样它就会出现在实际内容之上(源代码中后面出现的元素具有更高的 z-index:

HTML

<td>
   <div class="editable">
      <p>This would be the normal text that is editable</p>
      <img class="editimg" src="/edit.png"/>
   </div>
</td>

CSS

div.editable {
   width:100%;
   position:relative; /* this allows the img to be positioned relative to the div */
}
div.editable img.editimg {
   position:absolute;
   top:5px;
   right:5px;
}