сделать отзывчивую кнопку, которая остается в том же положении поверх изображения.

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> 

это устанавливаемое сотового

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

Я хочу .overlay ДИВ, чтобы остаться в том же положении, в верхней части синяя кнопка в изображении при изменении размера браузера. спасибо.

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;