Как позиционировать DIV налипание на вершине другой DIV

Question

У меня есть 2 типа дивы

<div class="target_div" id="t1"> </div> 
<div class="target_div" id="t2"> </div> 
<div class="target_div" id="t3"> </div> 
<div class="target_div" id="t4"> </div> 


<div class="child_div" id="c1"> </div> 
<div class="child_div" id="c2"> </div> 
<div class="child_div" id="c3"> </div> 
<div class="child_div" id="c4"> </div> 

Использование Jquery, скажем, я хочу расположить c1 над t1, так что их верхние левые углы совпадают всегда, как я продолжаю это делать? Я хочу, чтобы c1 придерживался t1 независимо от того, что ... изменение размера страницы, прокрутка .. во всех случаях.

Я создаю карточную игру, и я хочу перетащить капли и поместить карты из нижнего колонтитула и поместить в divs с номером 1-13. Отсюда вопрос.

На рисунке t1, t2 ... и т. Д. - это divs с номерами 1-13. c1, c2 и т. д. - это карты, лежащие на нижнем колонтитуле.

Answer 1

Просто установите карту в положение абсолютно с помощью CSS, а затем использовать этот скрипт:

var offset = $('#t1').offset() //example 
$('#c1').css({ 
    'top' : offset.top, 
    'left' : offset.left 
}) 

Answer 2

добавить position:relative; к target_div класса.

когда you'r падают child_div в target_div, переместите child_div элемент является прямым потомком target_div (манипуляции DOM очень легко с помощью JavaScript & JQuery like this), а затем добавить position:absolute; top:0; left:0; к конкретному child_div перемещения.