我有以下用于HTML的用例
我有两个div元素,背景为红色和蓝色.之后添加蓝色div,其中一部分与红色div重叠.
我可以选择“发送回”,将选定的div发送回其他div的后面.
如果我将此应用于蓝色div并选择蓝色div,它应该如下图所示
基本上我正试图迷惑安排的功能 – >订单 – >发送回Google演示文稿
我确实尝试了z-index但没有成功.我可以使用背景渐变与蓝色div透明的重叠部分,但这会侵犯我想要避免的一些计算.
如何在HTML中实现这一点?
任何帮助表示赞赏.
注意:所有div元素都放置在position:absolute
更新:红色div位于蓝色div之上,因为其z-index高于蓝色div.选择红色div时,它应如下所示(边框突出显示).
现在,如果我选择蓝色div,它的一部分与红色div重叠不会出现(显然因为它的z-index较小)但我希望它的边框在我select.it时出现.
最佳答案
正如你所评论的那样,我猜你需要的是这个,也就是说,只需要在你想要叠加的div上调用一个类.
我没有把你的问题安静得很好,但我认为你想在点击它时将一个元素带到另一个元素之上,而不是你可以这样做
说明:
这里做的是,我只是在你使用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"});
});
代码参考:
$(".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;
}