Question

我正在考虑实施一个演示，用户可以在图像/ div下面移动图像或div，就像我们在纸牌游戏纸牌中看到的那样。用户可以将卡片移到赠送卡片下方。如果用户选择了卡片放置其他位置（上面的卡不存在它回到原来的位置）。你可以建议我在哪里开始。我把div作为图像。我想将底部div移动到上面的div下面。我们实现了在jQuery中

FIDDLE

<div id="red_card" style="background:red;width:100px;height:100px;float:left ; margin: 10px 10px"></div>
<div id="yellow_card" style="background:yellow;width:100px;height:100px;float:left;    margin: 10px 10px;
     "></div>
<div id="blue_card" style="background:blue;width:100px;height:100px;float:left;    margin: 10px 10px;
     "></div>
<div id="black_card" class="footer" style="background:black;width:100px;height:100px;    margin: 10px 10px;
     "></div>

Answer 1

HTML：

<div class="red card" style="background:red;width:100px;height:100px;float:left ; margin: 10px 10px"></div>
 <div class="yellow card" style="background:yellow;width:100px;height:100px;float:left;    margin: 10px 10px;
"></div>
 <div class="blue card" style="background:blue;width:100px;height:100px;float:left;    margin: 10px 10px;
"></div>
<div class="black card" class="footer" style="background:black;width:100px;height:100px;   float:left; margin: 10px 10px;
"></div>

CSS：

.card{
    position:absolute;
    left:0;
    top:0;
}

.yellow{
    top:20px;
}

.blue{
    top:40px;
}

.black{
    top:60px;
}

的jsfiddle：

http://jsfiddle.net/k4Trg/

Answer 2

在html中，重叠的div具有所谓的“堆栈顺序”。堆栈顺序决定了哪一个div / image /是另一个。为了帮助浏览器确定堆栈顺序应该是什么，您可以在css中使用z-index。

z-index: 5

具有较高z-index的元素将始终显示在具有较低z-index的元素之上。 jQuery可以像这样更改z-index：

$('.firstCard').css('z-index', '15');

或其他什么。只需设置卡片即可更改位置并根据点击次数更改z-index。

如何在纸牌游戏纸牌中将div / image放在div / image下面

2 个答案: