Question

我有以下代码片段来渲染与另一个图标重叠的图标。整个div是一个链接。目前我使用position：absolute并调整重叠。没有绝对位置，我怎么能这样做呢。我还想在屏幕右侧显示整个div（目前在左侧）。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

如果您使包含的div具有float: right

，您仍然可以使用position: relative旁边的绝对定位

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

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

我还把整个事情向左推了一下，所以它没有被片段模糊不清

Answer 2

您需要正确定位或缩小字体大小：

<强>段

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

这对你有用吗？

HTML5中没有绝对的图标重叠

2 个答案: