HTML5中没有绝对的图标重叠答案

【问题标题】：Overlap of icons without absolute in HTML5HTML5中没有绝对的图标重叠
【发布时间】：2015-11-05 06:29:27
【问题描述】：

我有以下 sn-p 来渲染一个与另一个重叠的图标。整个 div 是一个链接。目前我正在使用 position:absolute 并调整重叠。没有绝对位置怎么办。我还希望整个 div 位于屏幕右侧（目前位于左侧）。

.btn-circle {
  position: absolute;
  top: 4px;
  left: 25px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  background: red;
  border-radius: 50%;l
}

.count {
  position: absolute;
  top:8px;
  left:38px;
  font-size:16px;
  font-weight: bold;
  color:white;
}

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">   
<div class="">
      <a href="#">
        <i class="fa fa-inbox fa-2x"></i> 
        <span id="red-circle" class="btn btn-circle"></span>
        <span id="toDosCount" class="count">9</span>
      </a>
    </div>

【问题讨论】：

为什么不想使用绝对定位？
我选择红蜘蛛，虽然他是霸天虎，position: absolute 没问题

标签： css html font-awesome-4

【解决方案1】：

如果你让包含的 div 有position: relative，你仍然可以在float: right 旁边使用绝对定位

这使得内部 span 的绝对位置相对于 div 而不是页面。

对顶部和右/左值进行了一些调整，并且：

.btn-circle {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  background: red;
  border-radius: 50%;    
}

.count {
  position: absolute;
  top: -4px;
  right: -1px;
  font-size:16px;
  font-weight: bold;
  color:white;
  padding: 2px;
}

.wrapper {
  float: right;
  position: relative;
  margin-right: 100px;
}

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">   
<div class="wrapper">
      <a href="#">
        <i class="fa fa-inbox fa-2x"></i> 
        <span id="red-circle" class="btn btn-circle"></span>
        <span id="toDosCount" class="count">9</span>
      </a>
    </div>

我还将整个内容向左轻推一点，以免被 sn-p FULL PAGE 遮挡

【讨论】：

当我运行这个 sn-p 时，整个 div 仍然在屏幕的左侧

【解决方案2】：

要么正确定位，要么缩小字体大小：

片段

.btn-circle {
  position: absolute;
  top: -15px;
  right: 0;
  width: 15px;
  height: 15px;
  line-height: 15px;
  background: red;
  border-radius: 50%;
}

div a {position: relative;}

.count {
  position: absolute;
  top: -15px;
  right: 5px;
  font-size: 10px;
  font-weight: bold;
  color: white;
  text-align: center;
}

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">   
<div class="">
  <a href="#">
    <i class="fa fa-inbox fa-2x"></i> 
    <span id="red-circle" class="btn btn-circle"></span>
    <span id="toDosCount" class="count">9</span>
  </a>
</div>

这对你有用吗？

【讨论】：

你还在用absolute，整体还在左边。我希望它在右边。如果我使用 float:right，它将无法工作，因为位置是绝对的。
我什么时候让你使用 float: 对。恰到好处：0 会起作用。
当我运行这个 sn-p 时，div 仍然在屏幕的左侧
现在可以正常使用了。但我无法改变圆圈的大小。它必须是 30 像素 X 30 像素