html - 将图片按钮粘贴到iframe叠加层的右侧

单击导航中的链接时，我的简历位于iframe div中，该简历覆盖了我的投资组合部分。我有一个“ X”图像供用户单击以关闭重叠式广告，我想将其放置在简历iframe的右侧（即：它紧靠iframe的右边缘）。

我似乎无法弄清楚该如何做-我尝试使用各种不同的浮动，定位和边距设置，但我能获得的最接近的位置是“ x”在右侧，但其位置随窗口缩放而移动。我希望它能“粘”在简历的右边并留在那里！有没有办法做到这一点？这是我的代码：

HTML：

<header>
<nav></nav>
</header>

<div id="resume-overlay">
    <div id="resume">
        <iframe src="resume.html"></iframe>
        <a href="#"><img class="button" src="img/x-button.png"></a>
    </div>
</div>

<div id="portfolio">
</div>

CSS：

header {
    height: 80px;
    width: 1600px;
    position: fixed;
    top: 0px;
    z-index: 1;
    background-color: white;
    margin-left: 100px;
}

#resume-overlay {
    display: none;
    position: fixed;
    z-index: 2;
    top: 80px;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, .9);
}

.resume {
    position: relative;
    max-width: 1600px;
}

iframe {
    position: absolute;
    width: 100%;
    height: 100%;
}

.button {
    position: absolute;
    z-index: 3;
    right: 0;
    padding-right: 10%;
}

还有我的jQuery（如果需要）：

$(function() {
    $('#overlay').on('click', function() {
        $('#resume-overlay').fadeToggle('fast');
    });

    $(".button").click(function(event) {
        event.preventDefault();
        history.back(1);

        $('#resume-overlay').fadeToggle('fast');
    });
});

To illustrate, I want to move that blue X to the right edge of the white box

最佳答案

我不确定它们是否是您看到的错误类型，但是您的代码在这里：

.button {
    position: absolute;
    z-index: 3;
    right: 0;
    padding-right: 10%;
}

我认为您需要解决的所有问题，请尝试添加

top: 0;
right: 0;

并删除填充，使用这些值将按钮移到所需的位置，并且无论窗口大小如何，都不应将其移出这些设置。