Как правильно разместить изображение с помощью css

Question

Я работаю на сайте cs-cart. У меня есть изображение с круглыми кругами. Затем у меня есть другие образы, которые являются круглыми кругами. Мне нужно поместить круги вокруг первых кругов изображения. Проблема в том, что я использую позицию: абсолютное все отлично работает, но когда браузер меняет разрешения, кнопки перемещаются. когда я использую положение: относительные изображения остаться там место, но ссылки не работают

Фоновое изображение

<p> 
<img src="http://thrivegoods.net/images/MAIN PAGES/menumainmarketplace.jpg" class="MenuMarketplaceBanner" style="background-color: initial;"> 
</p> 

маленький кружок изображения

<p> 
<a href="http://thrivegoods.net/artist-info?action=preview"><img src="http://thrivegoods.net/images/MAIN%20PAGES/BUTTONS/roundinfoforartists.jpg" class="RoundInfoForArtists" alt="RoundInfoForArtists"></a> 
</p> 

Css

.RoundAccountabilityButton { 
position: absolute; 
    top: 1185px; 
    left: 489px; 
    z-index: 3; 
} 

.MenuMarketplaceBanner { 
position: relative; 
z-index: 1; 
    } 

Answer 1

position absolute работает отлично, когда вы даете ему параметры fo, где вы хотите, чтобы он сидел, например, верхний правый левый b ottom. Но он будет выходить из нормального потока вашего сайта, когда вы используете абсолютный. Можете ли вы предоставить свой css, чтобы увидеть его?

Один из способов, которым вы можете попробовать, - получить div, сделать его относительным, чтобы он находился в потоке вашей веб-страницы, а затем вложил в него изображения. Сделайте их абсолютными для div (что является относительным).

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

UPDATE: Брус повторить сценарий на моем компьютере, ваши ссылки работают нормально при изменении разрешения.