使图标出现在框的右上角

Question

我想让悬停时的问号出现在白框的右上角。目前，它出现在白框的左下角。

<div class="panel panel-default">
  <div class="panel-heading">
    Test
  </div>
  <div class="panel-body">
    <div id="rptTitle">
      <br />
      <br />
      Text here....... text here......
      <br />
      <br />
    </div>
    <div class="questionBox" data-original-title="More Information" data-toggle="tooltip" data-placement="top">
      <i class="fa fa-question-circle grayColor"></i>
    </div>
  </div>
</div>

CSS:

.grayColor {
  color: #A6A6A6;
}

.panel {
  cursor: pointer;
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid #fff;
  opacity: 0.8;
}

.panel:hover {
  cursor: pointer;
  border: 1px solid #eee;
  background: #fff none repeat scroll 0 0;
  opacity: 1;
}

.panel:hover .panel-heading {
  background-color: #f6f6f6;
}

.panel .questionBox i {
  font-size: 15px;
  display: none;
}

.panel:hover .questionBox i {
  font-size: 15px;
  display: block;
}

JSFiddle

我试过使用 position:absolute; 和 right, top 但如果我有多个 div

更新：

Answer 1

您对 position:absolute; 的想法是正确的，但您还需要将父元素设置为 position:relative;。最后添加 top:0px 和 right:0px 到问号元素。

使用更新后的 post，您还需要将 div 移动到 div 和 class panel-body 内，并确保 panel-body 是 position:relative;.

JSFiddle

Answer 2

试试这个：

.questionBox > * {
  position: absolute;
  top:65px;
  right: 25px;
}

实例：

（更新）https://jsfiddle.net/kow5np4q/7/

另一种方法（没有position: absolute）

https://jsfiddle.net/kow5np4q/8/

第三种方法：

https://jsfiddle.net/kow5np4q/10/

而使用第三种方法，您不需要使用 <br>s。请改用填充。

Answer 3

你应该相对定位你的外部 panel 然后你可以绝对定位你的图标。

尝试以下解决方案：

.panel {
  position:relative;
}

.fa.fa-question-circle {
  position: absolute;
  top: 0;
  right: 0;
}

Fiddle

这样做的原因是因为绝对定位某物会相对于非静态定位的第一个祖先元素来定位项目。这就是相对定位到panel.

的原因

想象一个盒子。盒子有相对定位。该框内绝对定位的任何内容都具有该框的最大值 height/width。因此，当您绝对定位图标并使用 top: 0; right: 0 时，您会将其置于该框的右上角。在这种情况下，框是 panel.

更新

根据您的新标准，您可以尝试这样的操作：

#rptTitle {
  display:inline-block;
  width: 90%;
}

.questionBox {
  display: inline-block;
  float: right;
}

这是一个快速而肮脏的解决方案，但符合您的需要。使用这些概念来更好地构建它:)

New Fiddle

使图标出现在框的右上角

Make icon appear on top right of the box

html

css

twitter-bootstrap

font-awesome