iframeオーバーレイの右端にイメージボタンを貼り付けます

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; 

を追加してみてください、アドレスおよびパディングを削除し、あなたがそれをしたいボタンを取得するために、これらの値を処理する必要があると思うすべてですウィンドウのサイズに関係なく、それらの設定から移動すべきではありません。