Attribute Changes When Accessing It in Javascript

Question

On an html file, I call a javascript function like so:

<script>
  positionModal = function (event, modalId) {
    var modal = document.getElementById(modalId);
    modal.style.position = 'absolute';
    var modal = document.getElementById(modalId);
    modal.style.left = modal.offsetWidth + "px";
    modal.style.top = modal.offsetHeight + "px";
    console.log(modal);
    console.log(modal.offsetWidth);
    console.log(modal);
  }
</script>

to ultimately place a modal where a button was clicked. The first console.log(modal) prints the modal with the offsetWidth as an attribute with a value of 200. The second log, namely the accessed offsetWidth, shows a value of 0, where the third, the sole modal, evaluates at 200 again. This is not a duplicate of console.log() shows the changed value of a variable before the value actually changes because the console.log() part is the debugging attempt, not my goal. My goal is to get the position of the click of a button that triggers this function and positions the modal next to the button!