javascript - HTML5 中的发送回功能

Question

我有以下要用 HTML 实现的用例

我有两个背景为红色和蓝色的 div 元素。稍后添加蓝色div，其中一部分与红色div重叠。
我有“发送到后面”的选项，它将选定的 div 发送到其他 div 的后面。
如果我将其应用于蓝色 div 并选择蓝色 div，它应该如下图所示

基本上，我正在尝试简化 Google Presentation 的 Arrange --> Order --> Send to back 的功能

我确实尝试了 z-index 但没有成功。我可以将 background-gradient 与 blue div transparent 的重叠部分一起使用，但这会涉及一些我想避免的计算。

如何在 HTML 中实现这一点？
感谢您的帮助。

注意:所有div元素都放置在position: absolute
更新:red div 位于blue div 之上，因为它的z-index 高于blue分区。选择 red div 时，它应该如下所示(突出显示边框)。

现在，如果我选择 blue div，它与 red div 重叠的部分不会出现(很明显，因为它的 z-index较小)但我希望它的 border 在我选择它时出现。

Answer 1

正如您所评论的，我想您需要的是这个，另外，只需在要堆叠的 div 上调用一个 class。

Final Demo

---

我没有很好地解决你的问题，但我假设你想在点击一个元素时将其置于另一个元素之上，而不是你可以通过这种方式做到这一点

Demo

解释:

我在这里做的是，我只是在您使用 jQuery 单击的 div 上应用 z-index。

Demo 3 (当你更新你的问题时)

---

使用border标记当前选中的div

$(".wrap div").click(function(){
    $('.wrap div').removeAttr('style');
    $(this).css({"z-index":"1", "border":"1px solid #000"});
});

Demo 2

代码引用:

$(".wrap div").click(function(){
  $(this).css("z-index","1"); 
});

.wrap {
    position: relative;
}

.wrap div {
    position: absolute;
    height: 100px;
    width: 100px;
}

.wrap div:nth-of-type(1) {
    background: #f00;
    left: 10px;
}

.wrap div:nth-of-type(2) {
    background: #0f0;
    left: 80px;
}

<div class="wrap">
    <div></div>
    <div></div>
</div>