offset.diff

diff --git a/src/util/previewFrame/elementHighlighterScript.js b/src/util/previewFrame/elementHighlighterScript.js
index e1dac4a..fe2d3c6 100644
--- a/src/util/previewFrame/elementHighlighterScript.js
+++ b/src/util/previewFrame/elementHighlighterScript.js
@@ -7,25 +7,34 @@ const elementHighlighterScript = `(${function() {
     }
   });
 
+  function getOffsetFromBody(element) {
+    if (element === document.body) {
+      return {top: 0, left: 0};
+    }
+
+    const {top, left} = getOffsetFromBody(element.offsetParent);
+    return {top: top + element.offsetTop, left: left + element.offsetLeft};
+  }
+
   function updateCovers(selector) {
     const highlighterElements =
     window.document.querySelectorAll('.__popcode-highlighter');
-    for (const highlighterElement of highlighterElements) {
+    for (let i = 0; i < highlighterElements.length; i++) {
+      const highlighterElement = highlighterElements[i];
       highlighterElement.remove();
     }
 
     if (selector !== '') {
       const elements = document.querySelectorAll(selector);
-      for (const element of elements) {
-        const rect = element.getBoundingClientRect();
-        const cover =
-        document.documentElement.appendChild(
-          document.createElement('div'));
+      for (let i = 0; i < elements.length; i++) {
+        const element = elements[i];
+        const offset = getOffsetFromBody(element);
+        const cover = document.body.appendChild(document.createElement('div'));
         cover.className = '__popcode-highlighter';
-        cover.style.left = `${rect.left}px`;
-        cover.style.top = `${rect.top}px`;
-        cover.style.width = `${rect.width}px`;
-        cover.style.height = `${rect.height}px`;
+        cover.style.left = `${offset.left}px`;
+        cover.style.top = `${offset.top}px`;
+        cover.style.width = `${element.offsetWidth}px`;
+        cover.style.height = `${element.offsetHeight}px`;
       }
     }
   }