我想在www.example.com上的所有广告上放置一些div，如下所示：Amazon.com like this:

这是我的一个项目。上面的图片是通过使用getBoundingClientRect获得广告的坐标并创建div，根据这些坐标设置top和left，并将div附加到document.body中来实现的。但是，由于它们具有绝对位置，并且是document.body的子项，因此它们不随广告移动。例如，如果我调整窗口大小this happens
此外，在产品页面中，this happens without doing anything。
我也尝试过将div附加到iframe/ads的父节点上，但似乎永远无法让它们出现在父节点之外。我尝试过各种链接的建议，如将位置设置为绝对，将底部或顶部设置为相对，但都没有效果。有一个div出现在父节点之外的示例，但它是在like this之上的某个随机位置。
我真的不知道该如何实现这一点。理想情况下，div应该是iframe的兄弟，或者类似的东西，这样我就不必处理当窗口调整大小时div不移动的问题。但是，我似乎无法让任何东西工作。

// Here is the code for appending to parent of iframes.
    // The divs just end up overlaying the ad.
    function setStyle(element, styleProperties) {
        for (var property in styleProperties) {
            element.style[property] = styleProperties[property];
        }
    }

    // Regex for getting all the parents of all the iframes
    var placements = document.querySelectorAll('div[id^=\'ape_\'][id$=\'placement\']');

    for (var i = 0; i < placements.length; ++i) {
        var placement = placements[i];

        var iframe = placement.getElementsByTagName('iframe')[0];
        var debugDiv = document.createElement('div');
        debugDiv.id = iframe.id + '_debug_div';
        setStyle(debugDiv, {
            'backgroundColor': '#ff0000',
            'height': '30px',
            'display': 'block',
            'position': 'absolute',
            'top': '-30px',
            'zIndex': '16777270',
        });
        alert(placement.id)
        placement.style.position = 'relative'
        placement.appendChild(debugDiv);
    }

编辑：
下面是getBoundingClientRect的代码：

function setStyle(element, styleProperties) {
    for (var property in styleProperties) {
        element.style[property] = styleProperties[property];
    }
}

function createDiv(iframeId, top, left, width) {
    var div = document.createElement('div');
    div.id = iframeId + '_debug_div';
    setStyle(div, {
        'backgroundColor': '#ccffff',
        'backgroundColor': '#ff0000',
        'height': '30px',
        'width': width.toString() + 'px',
        'display': 'block',
        'position': 'absolute',
        'top': (top - 30).toString() + 'px',
        'left': left.toString() + 'px',
        'zIndex': '16777270'
    });

    return div;
}

var placements = document.querySelectorAll('div[id^=\'ape_\'][id$=\'placement\']');

for (var i = 0; i < placements.length; ++i) {
    var placement = placements[i];

    var iframe = placement.getElementsByTagName('iframe')[0];
    var iframeRect = iframe.getBoundingClientRect();
    iframeWidth = iframeRect.right - iframeRect.left;
    var debugDiv = createDiv(iframe.id, iframeRect.top, iframeRect.left, iframeWidth);
    document.body.appendChild(debugDiv);
};

调整窗口大小时，此功能无法正常工作。在某些广告的产品页面上，此功能也无法正常工作。