Bir iframe örtüsünün sağ kenarına bir görüntü düğmesi yapıştırın

Question

Özgeçmişimi, navamdaki bir bağlantı tıklandığında portföy bölümümün üzerine yerleştiren bir iframe div'sinde var. Kullanıcının bindirmeyi kapatmak için bir "X" görüntüsüne sahibim ve bunu iframe özgeçmişinin sağına yerleştirmek istiyorum (yani: iframe'in dış sağ kenarına doğru kıvrımlar).

Bunu nasıl yapacağımı anlayamıyorum - Farklı float, konumlandırma ve kenar boşluğu ayarlarını kullanmayı denedim ancak alabildiğim en yakın nokta, "x" in sağ tarafında olduğu ancak konumunun pencere yeniden ölçeklendiriliyor. Bunun yerine özgeçmişin sağ kenarına "yapışıp" kalmasını ve orada kalmasını isterim! Bunu yapmanın bir yolu var mı? Gerekirse

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%; 
} 

Ve jQuery:

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 İşte benim kodudur

$(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

emin değilim onlar hata yazıyorlar Henüz görerek, ancak burada kod:

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

çözmeniz gereken bence hepsi mi, istediğiniz yere düğmeye almak için bu değerler ile çalışmak,

top: 0; 
right: 0; 

eklemeyi deneyin Ve dolguyu kaldırmak ve pencere boyutundan bağımsız olarak bu ayarlardan hareket etmemelidir.