5

我有以下我想在 HTML 中实现的用例

I've two div element with background red and blue. The blue div is added later of which a part overlaped with red div. I have the option of "send to back" which sends the selected div to back of other div. If I apply this to blue div and select blue div it should look like below image

在此处输入图像描述

基本上我正在尝试Arrange --> Order --> Send to back缩小Google Presentation

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

如何在 HTML 中实现这一点？
任何帮助表示赞赏。

注意：所有div元素都放置在position: absolute
Update:上方red div，blue div因为它z-index高于blue div。当red div被选中时，它应该如下所示（突出显示边框）。

在此处输入图像描述

现在，如果我选择与blue div它重叠的部分red div不会出现（显然因为它z-index较小），但我希望它border在我 select.it 时出现。

4

1 回答 1

4

正如您所评论的，我想您需要的是这个，而且，只需调用您想要堆叠的classa即可。div

最终演示

我没有让你的问题安静下来，但我假设你想在点击一个元素时将它放在另一个元素之上，而不是你可以这样做

演示

解释：

我在这里做的是，我只是应用z-index你div点击使用 jQuery。

演示 3（当您更新问题时）

用来border标记当前选中的div

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

演示 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>
于 2013-10-11T06:24:27.657 回答