Как перекрыть div по определенному расположению изображения с помощью JQuery?

Question

У меня есть большое изображение на веб-странице. И div Ниже он содержит данные. Теперь, когда пользователь щелкает по кнопке, данные, содержащие данные, должны быть перекрыты по изображению на конкретном месте, используя JQuery.

<div> 
<img src="Images/FLRegions.png" usemap="#planetmap" style="height: 766px; width: 776px;z-index:1;" class="map" /> 
</div> 

<div id="destination"> 
This div contains Data which must overlap on Image on specific Location using JQuery 
</div> 

Помогите оценить! Спасибо!

Answer 1

Поместите DIV внутри другого, как это:

<div class="container"> 
    <img src="Images/FLRegions.png" usemap="#planetmap" style="height: 766px; width: 776px;z-index:1;" class="map" /> 
    <div id="destination"> 
     This div contains Data which must overlap on Image on specific Location using JQuery 
    </div> 
</div> 

Затем с помощью CSS, как это:

.container{ 
    position: relative; 
} 
#destination{ 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

Он может быть перемещен динамически с помощью JQuery, как это:

$('#button').click(function(){ 
    $('#destination').animate({ 
     left: 0, //enter your position 
     top: 0 
    }, 500); 
});