jquery - 在文本框内添加叠加按钮

Question

在我的网络应用程序中，我有几个输入字段。当用户将鼠标悬停在输入项上时，我希望能够在输入字段的右下角显示一个小图标按钮，当用户按下它时，我希望能够显示一个带有要添加的字段的 Bootstrap 弹出窗口评论。

我不知道如何在输入字段上放置一个按钮。

如果我能做到这一点，我可以轻松添加弹出窗口并在悬停时显示等。

请帮忙...这是我的http://jsfiddle.net/WTpPH/ .

是否需要设置

z-index: 100

还是什么？

Answer 1

根据您现有的代码，一种方法是在 anchor 上设置负边距。

a { margin-left: -16px; }

查看更新后的 fiddle :http://jsfiddle.net/WTpPH/1/

另一种方法是将输入和 anchor 包装在相对定位的 div 中。然后你可以在 anchor 上使用绝对定位，将它准确地放置在你想要的相对于 div 的位置。不过，您需要仔细设置宽度。

a { position: absolute; right: 4px; top: 4px; ... }

查看更新后的 fiddle :http://jsfiddle.net/WTpPH/2/