Javascript Iframe和重叠按钮问题

我现在使用的是iframe，我想在iframe的右上角有一个按钮，只在鼠标上方显示。如何添加此按钮？谁能帮我找到正确的方向。

jQuery HTML

请记住，这会使

iframe

的一部分变得模糊。最好不要这样做

$(function() {
    var close = $('#close');
    $('#frame').hover(function() {
        close.show();
    }, function() {
        close.hide();
    });
});

<div id="frame">
    <iframe src="http://example.com"></iframe>
    <div id="close">Close</div>
</div>

#frame {
    width: 400px;
    height: 300px;
    position: relative;
}

#frame iframe {
    width: 100%;
    height: 100%;
}

#close {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    border: 1px solid red;
    background: #fff;
    padding: 5px;
}