javascript - 如何将 div 定位在另一个 div 之上

Question

我有 2 种类型的 div

<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 无论如何......页面调整大小，滚动......在所有情况下。

我正在创建一个纸牌游戏，我想从页脚拖放卡片并将其放置在编号为 1-13 的 div 中。因此问题。

在图片中，t1,t2... 等是编号为 1-13 的 div。c1,c2 等是位于页脚的卡片。

Answer 1

只需使用 CSS 将您的卡设置为绝对位置，然后使用此脚本：

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

Answer 2

添加position:relative;到target_div班级。

当您放入 achild_div时target_div，将child_div元素移动为直接子元素（使用 JavaScript 和 JQuery这样target_div的DOM 操作非常容易），然后添加到被移动的特定元素。position:absolute; top:0; left:0;child_div