制作图标显示在框的右上角

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

您应该相对定位您的外部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

Answer 2

您对 <rewrite xdt:Transform="InsertIfMissing"> <rules xdt:Transform="InsertIfMissing"> <rule name="Force HTTPS" enabled="true" stopProcessing="true"> <match url="(.*)" ignoreCase="false" /> <conditions> <add input="{HTTPS}" pattern="off" /> <add input="{WARMUP_REQUEST}" pattern="1" negate="true" /> </conditions> <action type="Redirect" url="https://{HTTP_HOST}/{R:1}" appendQueryString="true" redirectType="Permanent" /> </rule> </rules> </rewrite> </system.webServer> 有正确的想法，但您还需要将父元素设置为function updateClock() { // Ivo's content to create the date. document.getElementById('time').innerHTML = [date, time].join(' / ') } setInterval(updateClock, 1000); 。最后，将position:absolute;和position:relative;添加到问号元素。

使用更新后的帖子，您还需要使用班级top:0px移动div中的div，并确保right:0px为panel-body。

JSFiddle

Answer 3

试试这个：

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

实例：

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

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

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

第三种方法：

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

使用第3种方法，您不需要使用<br>。改为使用填充。