CSS абсолютная ошибка положения

Question

У меня проблемы с абсолютным позиционированием в моей веб-странице:

Я хочу, чтобы расположить кнопки относительно своего родителя, и это то, что я сделал:

HTML

<div class="parent" align="middle"> 
    <img src="background.png" width="1900px"/> 
    <div class="child"> 
    <button class="button"></button> 
    </div> 
</div> 

CSS

.parent { 
    position: relative; 
} 

.child { 
    position: absolute; 
    top: 0px; 
    left:0px; 
} 

.button { 
    height: 55px; 
    width: 180px; 
    background-color: transparent; 
    border-color:transparent; 
    background: url(Button.png); 
    background-size: 100% auto; 
    background-repeat: no-repeat; 
} 

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

Answer 1

я думаю, это то, что вы хотите достичь

here является решением to your problem...

Answer 2

Кажется, что позиционирование не срабатывало так, как вы этого хотите. И поскольку вы хотели, чтобы изображение было сосредоточено, я сделал следующее. Я удалил позицию из родителя и изменил положение изображения на относительное. Затем я положил кнопку относительно изображения. Попробуйте это:

HTML

<div class="parent"> 
    <img src="background.png" width="400px" /> 
    <div class="child"> 
     <button class="button"></button> 
    </div> 
</div> 

CSS

.parent { 
    text-align:center; 
} 
.child { 
    position: relative; 
} 
.button { 
    height: 55px; 
    width: 180px; 
    background-color: transparent; 
    border-color:transparent; 
    background: url(Button.png); 
    background-size: 100% auto; 
    background-repeat: no-repeat; 
    position:absolute; 
} 

JSFiddle