Как поставить значки уведомлений на иконки?

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. При изменении этого значка значок перестает взаимодействовать с другими элементами flow / layout-position и станет своего рода «слоем сверху» вашего 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>

Answer 2

Вам нужно добавить еще одну строку css код, что-то вроде этого:

.icon-badge-group .icon-badge-container{
    vertical-align: top;
}

Answer 3

Это из-за позиции relative просто сделайте ее absolute, чтобы на ее наличие не влиял значок

.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;
    display: inline-block;
}

.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;
    top: -12px;
    right: -10px;
}

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