--- a/browser/extensions/screenshots/webextension/selector/ui.js
+++ b/browser/extensions/screenshots/webextension/selector/ui.js
@@ -212,18 +212,18 @@ this.ui = (function() { // eslint-disabl
         // Since this frame has an absolute position relative to the parent
         // document, if the parent document's body has a relative position and
         // left and/or top not at 0, then the left and/or top of the parent
         // document's body is not at (0, 0) of the viewport. That makes the
         // frame shifted relative to the viewport. These margins negates that.
         if (window.getComputedStyle(document.body).position === "relative") {
           const docBoundingRect = document.documentElement.getBoundingClientRect();
           const bodyBoundingRect = document.body.getBoundingClientRect();
-          this.element.style.marginLeft = `-${bodyBoundingRect.right - docBoundingRect.right}px`;
-          this.element.style.marginTop = `-${bodyBoundingRect.bottom - docBoundingRect.bottom}px`;
+          this.element.style.marginLeft = `-${bodyBoundingRect.left - docBoundingRect.left}px`;
+          this.element.style.marginTop = `-${bodyBoundingRect.top - docBoundingRect.top}px`;
         }
       }
       if (force && visible) {
         this.element.style.display = "";
       }
     },
 
     initSizeWatch() {