Как сделать кнопку, которая «прилипает» при нажатии на чекбокс?

Чтобы реализовать кнопку, которая «прилипает» при нажатии на чекбокс, и размещается рядом с ним, вам нужно немного изменить ваш JavaScript и CSS-код. Вот полное решение:

### HTML
```html
<div class="checkboxes">
  <label>
    <input type="checkbox" class="checkbox__input" />
    Чекбокс 1
  </label>
  <label>
    <input type="checkbox" class="checkbox__input" />
    Чекбокс 2
  </label>
  <label>
    <input type="checkbox" class="checkbox__input" />
    Чекбокс 3
  </label>
  <label>
    <input type="checkbox" class="checkbox__input" />
    Чекбокс 4
  </label>
  <label>
    <input type="checkbox" class="checkbox__input" />
    Чекбокс 5
  </label>
  <div class="floating-btn" style="display: none;">Показать</div>
</div>
```

### CSS
```css
.checkboxes {
  position: relative;
}

.floating-btn {
  position: absolute;
  display: none; /* Скрыто изначально */
  top: 0; /* Позиционирование сверху */
  left: 0; /* Изменим по мере необходимости */
  background-color: #007bff;
  color: white;
  padding: 10px;
  border-radius: 5px;
  transition: top 0.3s, left 0.3s;
}
```

### JavaScript
```javascript
const checkboxInputs = document.querySelectorAll(".checkbox__input");
const filterFloatingButton = document.querySelector('.floating-btn');

checkboxInputs.forEach((input) => {
  input.addEventListener("change", function () {
    // Убираем видимость кнопки, если нажали на тот же чекбокс
    if (input.checked) {
      const { top, left } = input.getBoundingClientRect();
      // Устанавливаем позицию кнопки
      const buttonTop = top + window.scrollY + 5; // Небольшой отступ снизу
      const buttonLeft = left + window.scrollX + 20; // Небольшой отступ справа
      filterFloatingButton.style.top = buttonTop + "px";
      filterFloatingButton.style.left = buttonLeft + "px";
      filterFloatingButton.style.display = "block";
    } else {
      filterFloatingButton.style.display = "none";
    }
  });
});
```

### Объяснение:
1. **HTML**: Мы используем `label`, чтобы связать текст с соответствующим чекбоксом, что делает интерфейс более дружественным для пользователя.
2. **CSS**: Класс `.floating-btn` изначально скрыт и позиционируется как `absolute`, чтобы его можно было накладывать над другими элементами.
3. **JavaScript**:
    - Мы добавляем обработчик событий на каждый чекбокс.
    - Если чекбокс активирован, мы вычисляем его позицию с помощью `getBoundingClientRect()` и устанавливаем позицию кнопки относительно окна браузера с небольшими отступами.
    - Если чекбокс выключен (проверка `input.checked`), кнопка исчезает.

Таким образом, у вас получится кнопка, которая будет размещаться рядом с последним активированным чекбоксом и исчезать, когда он становится неактивным.

Можно не вычислять положение, а чуть изменить принцип и верстку. Позиционировать кнопку с помощью CSS в отдельном контейнере, скриптом перемещать в нужный контейненр. 
 
 
<div class="filter-item">
  <input type="checkbox">
</div>
<div class="filter-item">
  <input type="checkbox">
</div>
<div class="filter-item">
  <input type="checkbox">
</div>
<button id="apply-button">показать</button>
 
 
 
#apply-button {
  display: none;
}

.filter-item {
  position: relative;
}
.filter-item input:checked ~ #apply-button {
  display: block;
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
}
 
 
 
const button = document.getElementById('apply-button');
document.querySelectorAll('.filter-item').forEach(item => {
  const cb = item.querySelector('input[type=checked]');
  cb.addEventListener('change', () => {
    if (cb.checked) {
      item.appendChild(button);
    }
  })
});