更改z-index以使点击的div出现在顶部 [英] Changing z-index to make a clicked div appear on top

问题描述

在我的应用程序中，我可以打开几个重叠的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屋！