如何将所选div放在所有其他div的顶部

Question

我屏幕上有一堆div.我想要做的是,当我选择任何div时,我希望它的zIndex总是高于所有其他div.

在我的应用程序中,每当我选择div时,我都需要反复执行此操作,将其置于其他人之上.

这可能使用Javascript吗？

Answer 1

是的,非常如此.

HTML:

<div>foo</div>
<div>bar</div>
<div>bas</div>

使用Javascript:

//Collect all divs in array, then work on them
var all = document.selectElementsByTagName("div");
var prev = false;

for(i = 0; x < ALL.length; i++) {
    all[i].onclick = function() {
        all[i].style.position = 'relative'; //necessary to use z-index
        if (prev) { prev.style.zIndex = 1; }
            this.style.zIndex = 1000;
            prev = this;
        }
    }
}

//编辑:对不起,忘了大括号.现在更正了.

Answer 2

在某些情况下，您可以将元素放在顶部而无需直接使用CSS。如果将DIV放置在body标签上或其他父元素下，则可以将其自己重新添加到父元素。JavaScript会将其移动到子列表的最后一个位置，这将以“自然”的方式将元素带到顶部。

例：

myElement.parentNode.appendChild(myElement);

我在自定义上下文菜单中使用了这个技巧。无需zIndex即可工作。

Answer 3

我建议在开始时设置一个变量并将其递增。

var top_z = 10;

function bringToTop(element)
{
    element.style.zIndex = ++top_z;
}

（++ top_z递增，然后返回top_z）