javascript – HTML5中的发送回功能

前端之家收集整理的这篇文章主要介绍了javascript – HTML5中的发送回功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我有以下用于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上调用一个类.

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;
}

猜你在找的CSS相关文章