Question

我的简历在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

Answer 1

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

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

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

top: 0;
right: 0;

删除填充，使用这些值来获取所需的按钮，无论窗口大小如何，它都不应从这些设置移动。

将图像按钮粘贴到iframe叠加层的右边缘

1 个答案: