I tried making a styled checkbox but only works when i use Position: absolute in css but the problem is, it makes it should move when scrolling scroll

I tried making a styled checkbox but only works when i use Position: absolute in css but the problem is that it makes it should move with the screen when scrolling instead of staying in one place like a regular checkbox The code is down bellow with the HTML "AND" the CSS i really appreciate you trying to help if you did

When i change the positioning the checkbox gets squished and hideous looking

  background-color: #f3f3f3;
}

.bg-container {
  
  top: 20%;
  width: 100%;
}

#_checkbox {
  display: none;
}

label {
  position: absolute;
  top: 7rem;
  right: 0px;
  left: 0px;
  width: 20px;
  height: 20px;
  margin: 0 auto;
  background-color: #f72414;
  transform: translateY(-50%);
  border-radius: 50%;
  box-shadow: 0 7px 10px #ffbeb8;
  cursor: crosshair;
  transition: 0.2s ease transform, 0.2s ease background-color,
    0.2s ease box-shadow;

  border: 2px solid rgba(0, 0, 0, 0.44);
}

label:before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  width: 10px;
  height: 10px;
  margin: 0 auto;
  background-color: #fff;
  transform: translateY(-50%);
  border-radius: 50%;
  box-shadow: inset 0 7px 10px #ffbeb8;
  transition: 0.2s ease width, 0.2s ease height;

}

label:hover:before {
  width: 1px;
  height: 1px;
  box-shadow: inset 0 7px 10px #ff9d96;
}

label:active {
  transform: translateY(-50%) scale(0.9);
}



#_checkbox:checked + label {
  background-color: #07d410;
  box-shadow: 0 7px 10px #92ff97;
}

#_checkbox:checked + label:before {
  width: 0;
  height: 0;
}

  <form>
        
    <input type="checkbox" id="_checkbox">
    <label for="_checkbox">
      <div id="tick_mark"></div>
    </label>
</form>