JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<label>Frame 1</label>
<iframe id="iframe-1" src="no.html" style="width:100%"></iframe>
<p>Click the button to change the background color of the document contained in the iframe.</p>

<p id="demo"></p>

<button id="my" >Try it</button>

<label>Frame 2</label>
<iframe id="iframe-2" src="yes.html" style="width:100%" />
<script>
function myFunction(){
        alert("hi");
        var imframe1 = document.getElementById('iframe-1');
        var innerDoc1 = imframe1.contentDocument ||
                       imframe1.contentWindow.document;
        innerDoc1.body.style.backgroundColor = "red";
        var x = innerDoc1.getElementById ( "carbonads" ).offsetLeft;
        var y = innerDoc1.getElementById ( "carbonads" ).offsetTop;
        alert('x offset: ' + x);
        alert('y offset: ' + y);
        
        var imframe2 = document.getElementById('iframe-2');
        var innerDoc2 = imframe2.contentDocument ||
                        imframe2.contentWindow.document;
        innerDoc2.getElementById ( "carbonads" ).style.position = "absolute";
 innerDoc2.getElementById ( "carbonads" ).style.backgroundColor = "blue";
        innerDoc2.getElementById ( "carbonads" ).left = x + 30;
        innerDoc2.getElementById ( "carbonads" ).top = y + 30;
        innerDoc2.body.style.backgroundColor =      innerDoc1.body.style.backgroundColor;

}

</script>
</body>

JavaScript

var m = document.getElementById('my');
m.addEventListener('click', myFunction);

function myFunction(){

        var imframe1 = document.getElementById('iframe-1');
        var innerDoc1 = imframe1.contentDocument ||
                       imframe1.contentWindow.document;
        innerDoc1.body.style.backgroundColor = "red";
        var x = innerDoc1.getElementById ( "carbonads" ).offsetLeft;
        var y = innerDoc1.getElementById ( "carbonads" ).offsetTop;
        alert('x offset: ' + x);
        alert('y offset: ' + y);
        
        var imframe2 = document.getElementById('iframe-2');
        var innerDoc2 = imframe2.contentDocument ||
                        imframe2.contentWindow.document;
        innerDoc2.getElementById ( "carbonads" ).style.position = "absolute";
        innerDoc2.getElementById ( "carbonads" ).style.left = (x - 30) + 'px';
        innerDoc2.getElementById ( "carbonads" ).style.top = (y - 30) + 'px';
        innerDoc2.body.style.backgroundColor = innerDoc1.body.style.backgroundColor;

}