画像上部の同じ位置にある応答ボタンを作成する

Question

応答画像の上にボタンを配置したいが、中央に配置しないボタンを同じ位置に配置したいボタンをクリックします。ここ はjsfiddleに私のコードです：

これはHTMLです：

<div class="container"> 

    <div class="img"> 
     <img src="http://www.playful.ma/wp-content/uploads/2017/02/img.png" class="0"> 
    </div> 

    <div class="overlay"> 
    <h4>My Button</h4> 
</div> 

これは私が.overlayのdivがの上に同じ位置に滞在したいCSS

.container{ 

    width: 100%; 

} 

.overlay{ 
    position:absolute; 
    top:70%; 
    left:60%; 
    padding:10px; 
    background:white; 
    border-radius:10px; 
} 


.img{ 
    position:relative; 
    width:100%; 
    min-width: 100%; 
} 

ですブラウザのサイズを変更すると画像の青いボタンが表示されます。 ありがとうございます。

Answer 1

です。

.container{ 
 
    position: relative; 
 
    padding-top: 31.875%; 
 
    height: 0; 
 
    background: url('http://www.playful.ma/wp-content/uploads/2017/02/img.png') 0 0 no-repeat; 
 
    background-size: cover; 
 
} 
 

 
h4 { 
 
    position:absolute; 
 
    top:70.5%; 
 
    left:34%; 
 
    color: white; 
 
    margin: 0; 
 
    font-size: 1.4vw; 
 
}

<div class="container"> 
 
    <h4>My Button</h4> 
 
</div>

Answer 2

正しい方向にあなたを得るためにこのCSSを使用してください。

.container{ 
    width: 100%; 
    position: relative 
} 

.overlay{ 
    position:absolute; 
    top:63%; 
    left:50%; 
    padding:10px; 
    background:white; 
    border-radius:10px; 
} 

通知は、コンテナがposition:relative;で、オーバーレイはあなたが画像に背景画像を作成し、ビューポート単位のフォントサイズとの相対位置を使用して、かなり近い取得することができますposition:absolute;