how to put a custom close button in bootstrap modal

I’m working on a project where I need to create a Bootstrap modal with a close button positioned at the top right corner. While I’ve managed to position the button using CSS, it’s not quite sticking to one spot. Despite applying absolute positioning, the button seems to move around inconsistently. I’ve tried troubleshooting the issue by adjusting the CSS properties and inspecting the elements in the browser’s developer tools, but I haven’t been able to find a solution.

enter image description here

Html

 <div class="modal fade" id="POD__Modal" tabindex="-1" aria-labelledby="POD__ModalLabel" aria-hidden="true">
      <div id="modal__close" class="  sticky-top">
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-dialog">
        
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="POD__ModalLabel">Proof of delivery</h5>
            
            </div>
          <div class="modal-body">
            <figure class="zoom" onmousemove="zoom(event)" style="background-image: url(https://i.guim.co.uk/img/media/70a2fd5f5acddd683b892245209974fa4c768498/324_0_1429_858/master/1429.jpg?width=1200&height=1200&quality=85&auto=format&fit=crop&s=e2b8991e17e7bd966a29f5c706fe2552)">
              <img src="https://i.guim.co.uk/img/media/70a2fd5f5acddd683b892245209974fa4c768498/324_0_1429_858/master/1429.jpg?width=1200&height=1200&quality=85&auto=format&fit=crop&s=e2b8991e17e7bd966a29f5c706fe2552" />
            </figure>
          </div>
          
        </div>
      </div>
    </div>

CSS

/* POD Image Modal  */
#POD__Modal .modal-body {
  padding: 0px;
}

#POD__Modal .modal-header {
  justify-content: space-around;
  color: var(--primary-color);
}

#POD__Modal #modal__close {
  position: absolute;
  margin-right: auto;
  margin-left: auto;
  top: -0.1rem;
  right: 0rem;
  z-index: 999999;
  padding: 5px;
  border-radius: 50%;
  background-color: var(--secondary-color);
}
#POD__Modal .btn-close
{
  filter:  invert(1) grayscale(100%) brightness(300%) hue-rotate(180deg);
}

#POD__Modal .modal-content {
  border: 2px solid var(--secondary-color);
  border-radius: 1rem;
}

#POD__Modal .modal-body {
  border-bottom-left-radius: 1rem;
}

#POD__Modal figure.zoom {
  background-position: 50% 50%;
  position: relative;
  width: 100%;
  overflow: hidden;
  cursor: zoom-in;
}

#POD__Modal figure.zoom img:hover {
  opacity: 0;
}

#POD__Modal figure.zoom img {
  transition: opacity .5s;
  display: block;
  width: 100%;
 
}
#POD__Modal figure {
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
}

enter image description here