JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header"></div>
<div class="page">
<div class="checkboxes">
  <input type="checkbox" class="checkbox__input" />
  <input type="checkbox" class="checkbox__input" />
  <input type="checkbox" class="checkbox__input" />
  <input type="checkbox" class="checkbox__input" />
  <input type="checkbox" class="checkbox__input" />
  <input type="checkbox" class="checkbox__input" />
  <div class="floating-btn">Показать</div>
</div>
</div>

CSS

.header{
  position:fixed;
  height:50px;
}
.page{
  padding: 50px 0px 0px 0px;
}
.checkboxes {
  position: relative;
  display:flex;
  flex-direction:column;
  align-items:start;
}
.checkbox__input{
  margin: 10px 0px;
}
.floating-btn {
  position: absolute;
  top:0;
  left: 50px;
  display:none;
}

JavaScript

const checkboxInput = document.querySelectorAll(".checkbox__input")
const filterFloatingButton = document.querySelector('.floating-btn');
checkboxInput.forEach((input) => {

  input.addEventListener("change", function () {
    if (input.checked) {
      let top = input.getBoundingClientRect().top - "25"
      filterFloatingButton.style.top = top + "px"
      filterFloatingButton.style.display = "block"
    } else {
      filterFloatingButton.style.top = 0
      filterFloatingButton.style.display = "none"
    }
  })
})