What is the correct way to right position a fixed modal close button

Question

I have a modal that is less than the width of the page, centered horizontally on the page and the modal close button in a fixed position at the bottom right corner of the modal.

The only way I have managed to get the close button to this fixed position was by setting the modal div to be text aligned right and the modal close button in a fixed bottom position with a negative left margin (to position it left from the modal scroll bar).

If the modal close button is set with a positive right margin value, the close button is positioned relative to the right edge of the window (and therefore not in the modal) rather than the model right edge.

Why when I set a (negative) left margin, the close button position is relative to the right side of the modal (which is what I want), but if instead I set a right margin (which seems the obvious method), the close button position is relative to the right side of the window?

HTML

<p class="p-gotomodal">  
<a  href="#modalid"  
    title="Open in a pop-up window the modal"  
    target="_self">  
Open Modal</a>  
</p>  
   
<div class="div-modalbackground" id="modalid">  
    <div class="div-modalbox">  
    <a class="a-modalclose"  
       href="#"  
       title="Close Modal"  
       target="_self">  
    &#10006;</a>  
    </div>  
</div>    

CSS

*{  
    margin:  0px;  
    padding: 0px;  
    border:  0px;  
}  

.p-gotomodal{  
    margin-left:    0px;  
    margin-top:    10px;  
    margin-right:   0px;  
    margin-bottom:  0px;  
    padding-left:  35px;  
    padding-top:    5px;  
    padding-right: 20px;  
}  

.div-modalbackground{  
    display:   none;  
    position: fixed;  
    top:        0px;  
    left:       0px;  
    width:    100vw;  
    height:   100vh;  
    z-index:      9;  
    background: rgba(127, 127, 127, 0.4);  
}  
  
.div-modalbackground:target{  
    display:     block;  
    position: absolute;  
}  
  
.div-modalbox{  
    max-width:     80ch;  
    max-height: calc(100% - 100px);  
    overflow:      auto;  
    position:  relative;  
    margin-left:   auto;  
    margin-top:    30px;  
    margin-right:  auto;  
    margin-bottom:  0px;  
    padding-left:   0px;  
    padding-top:    0px;  
    padding-right:  0px;  
    padding-bottom:10px;  
    text-align:   right;  
}  
  
.a-modalclose{  
    position:    fixed;  
    bottom:       65px;  
    width:        45px;  
    margin-left: -60px;  
    text-align: center;  
    z-index:        99;  
}