html - 使图标显示在框的右上方

我想使悬停时的问号出现在白框的右上方。当前，它显示在白框的左下方。

<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，那对我没有帮助

更新：

最佳答案

您应该相对放置外部panel，然后可以绝对放置图标。

请尝试以下解决方案：

.panel {
  position:relative;
}

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

Fiddle

这样做的原因是因为绝对放置某物相对于其非静态放置的第一个祖先元素放置了一个物品。这就是panel相对位置的原因。

画一个盒子。盒子有一个相对的位置。该盒子内部放置的任何东西绝对具有该盒子的最大高度/宽度。因此，当您完全放置图标并使用top: 0; right: 0时，它将位于该框的右上角。在这种情况下，该框为panel。

更新

根据您的新标准，您可以尝试执行以下操作：

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

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

这是一种快速而肮脏的解决方案，但可以满足您的需求。使用概念来更好地构建它：)

New Fiddle

关于html - 使图标显示在框的右上方，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35930325/