更改z-index以使点击的div出现在顶部 [英] Changing z-index to make a clicked div appear on top
本文介绍了更改z-index以使点击的div出现在顶部的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
在我的应用程序中,我可以打开几个重叠的div框。当点击一个框时,该框应该被移动到顶部。
In my application I can open several div boxes that overlap each other. When clicking on a box that box should be moved to the top. What is the best way to accomplish this?
我唯一可以想到的是循环遍历所有的盒子z-index值以获得最高的值,然后添加
The only thing I can think of is looping through all the boxes z-index values to get the highest value, and then add 1 to that value and apply it on the clicked div.
推荐答案
这样的操作应该可以:
// Set up on DOM-ready
$(function() {
// Change this selector to find whatever your 'boxes' are
var boxes = $("div");
// Set up click handlers for each box
boxes.click(function() {
var el = $(this), // The box that was clicked
max = 0;
// Find the highest z-index
boxes.each(function() {
// Find the current z-index value
var z = parseInt( $( this ).css( "z-index" ), 10 );
// Keep either the current max, or the current z-index, whichever is higher
max = Math.max( max, z );
});
// Set the box that was clicked to the highest z-index plus one
el.css("z-index", max + 1 );
});
});
这篇关于更改z-index以使点击的div出现在顶部的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文