Question

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

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

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

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

我需要设置

吗？

z-index: 100

还是什么？

Answer 1

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

a { margin-left: -16px; }

请参阅此更新的小提琴：http://jsfiddle.net/WTpPH/1/

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

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

请参阅此更新的小提琴：http://jsfiddle.net/WTpPH/2/

Answer 2

您可以position:absolute;使用z-index，如下所示：

HTML

<div>
<input type="text"></input>
<a href='#'>c</a>
</div>

CSS

div{

    position:relative;
}

input{
    position:absolute;
}

a{
    background-color:red;
    position:absolute;
    left:10px;
    top:3px;
}

jsFiddle

Answer 3

input {
    position:relative;
    z-index:9999999999999999;
}
.cc {
    position:absolute;
    left:155px;
    top:15px;
    z-index:9999999999999999999999999;
    display:none;
}

显然z-index夸大了＆gt;：D。关键是elements必须有一个定义的position，而z-index a必须高于其余部分。

$('input').focus(function () {
    $('.cc').show();
}).focusout(function () {
    $('.cc').hide();
});

FIDDLE

Answer 4

这是一个更友好的Bootstrap方法..

      <form role="search">
        <div class="input-group add-on">
          <input type="text" class="form-control">
          <div class="input-group-btn">
            <button class="btn btn-default" type="submit" data-toggle="popover" data-trigger="hover" data-placement="right" data-content="Hello popover content."><strong>?</strong></button>
          </div>
        </div>
      </form>

CSS向左移动按钮：

.add-on .input-group-btn > .btn {
  border-left-width:0;left:-2px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

工作演示：http://bootply.com/86596

在文本框中添加叠加按钮

4 个答案: