如何在图标上放置通知徽章？

Question

我正在尝试让通知徽章发挥作用，我就快到了:)

当我在那里有通知徽章时，它工作得很好，但如果我删除它，图标会因某种原因下降，我不明白为什么。

.icon-badge-group .icon-badge-container {
  display: inline-block;
  margin-left: 15px;
}

.icon-badge-group .icon-badge-container:first-child {
  margin-left: 0
}

.icon-badge-container {
  margin-top: 20px;
  position: relative;
}

.icon-badge-icon {
  font-size: 30px;
  position: relative;
}

.icon-badge {
  background-color: red;
  font-size: 12px;
  color: white;
  text-align: center;
  width: 20px;
  height: 20px;
  border-radius: 35%;
  position: relative;
  top: -35px;
  left: 17px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" rel="stylesheet"/>
<div class="container">
  <div class="icon-badge-container">
    <i class="far fa-envelope icon-badge-icon"></i>
    <div class="icon-badge">6</div>
  </div>
  <div class="icon-badge-container">
    <i class="far fa-user icon-badge-icon"></i>
    <div class="icon-badge">6</div>
  </div>

  <div class="icon-badge-group">
    <div class="icon-badge-container">
      <i class="far fa-envelope-open icon-badge-icon"></i>
      <div class="icon-badge">6</div>
    </div>
    <div class="icon-badge-container">
      <i class="far fa-user icon-badge-icon"></i>
    </div>
    <div class="icon-badge-container">
      <i class="far fa-user icon-badge-icon"></i>
      <div class="icon-badge">6</div>
    </div>
  </div>

Answer 1

你做得非常好，唯一需要改变的就是位置从relative到absolute。更改此设置时，徽章将停止与其他元素流/布局位置交互，并将成为元素的一种“顶部层” icon-badge-container。

另一个内联块元素icon-badge-container将不再受到您的徽章的困扰。

我用注释标记了 CSS 哪些行发生了更改。

有关职位的更多信息：https ://developer.mozilla.org/en-US/docs/Web/CSS/position

.icon-badge-group {
 
}

.icon-badge-group .icon-badge-container {
    display: inline-block;
    margin-left:15px;
}

.icon-badge-group .icon-badge-container:first-child { 
  margin-left:0
}

.icon-badge-container {
    margin-top:20px;
    position:relative;
}

.icon-badge-icon {
    font-size: 30px;
    position: relative;
}

.icon-badge {
    background-color: red;
    font-size: 12px;
    color: white;
    text-align: center;
    width:20px;
    height:20px;
    border-radius: 35%;
    position: absolute; /* changed */
    top: -5px; /* changed */
    left: 18px; /* changed */
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">


<div class="icon-badge-group">
    <div class="icon-badge-container">
        <i class="far fa-envelope-open icon-badge-icon"></i>
        <div class="icon-badge">6</div>
    </div>
    <div class="icon-badge-container">
        <i class="far fa-user icon-badge-icon"></i>
    </div>
    <div class="icon-badge-container">
        <i class="far fa-user icon-badge-icon"></i>
        <div class="icon-badge">6</div>
    </div>
</div>