我的屏幕上有一堆 div。 我想要做的是，当我选择任何 div 时，我希望它的 zIndex 始终高于所有其他 div。
在我的应用程序中，每当我选择一个 div，将其放在其他 div 之上时，我都需要重复执行此操作。
使用 Javascript 可以吗？
在某些情况下，您可以将元素置于顶部，而无需直接使用 CSS。如果将 DIV 放置到 body 标记或另一个父元素下，则可以将其自身重新附加到父元素。 JavaScript 会将其移动到子列表中的最后一个位置，这将以“自然”的方式将该元素带到顶部。
示例：
myElement.parentNode.appendChild(myElement);
我将这个技巧用于我的自定义上下文菜单。无需 zIndex 即可工作。
是的，非常如此。
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; i < 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;
}
}
}
我建议在开始时设置一个变量并递增它。
var top_z = 10;
function bringToTop(element)
{
element.style.zIndex = ++top_z;
}
（++top_z 递增，然后返回 top_z）
我会做类似的事情：
var my_index = 100; //global var on page
function sendontop(div_id) {
if (typeOf(div_id)=="string") {
div_id=document.getElementById(div_id);
}
div_id.style.zIndex = my_index++;
}
在物体上
<div id="bringmeup" onclick="sendontop(this);" >somecontent</div>
或者您也可以使用
sendontop("bringmeup");
我遇到了这个问题并这样解决了
希望有帮助！
document.getElementById("mainactiondiv").firstElementChild.appendChild(bubble);
这对我有用（本解决方案的修改版本，因为它产生了很多错误）。 当您单击该元素时，它应该转到顶部。 希望有帮助！
var allDivs = document.getElementsByTagName("div"); //Changed variable name to 'allDivs' because the name 'all' generated an error.
var prev = false;
for(ii = 0; ii < allDivs.length; ii++) { // changed the for variable to 'ii' instead of 'i' so i can find it easier (searching for 'i' will return avery instance of the letter i, even inside words, not just the variable, whereas ii is unique).
allDivs[ii].onclick = function() {
this.style.position = 'absolute'; //You have to have a position type defined. It doesn't matter what type, you just have to. If you define it elsewhere in your styles you can remove this.
if (prev) { prev.style.zIndex = 1; }
this.style.zIndex = 1000;
prev = this;
}
}div {
padding:20px;
border:2px solid black;
border-radius:4px;
}
#d4 {
background-color:lightblue;
position:absolute;
top:30px;
left:20px;
}
#d3 {
background-color:lightgreen;
position:absolute;
top:70px;
left:20px;
}
#d2 {
background-color:yellow;
position:absolute;
top:30px;
left:70px;
}
#d1 {
background-color:pink;
position:absolute;
top:70px;
left:70px;
}<html>
<div id="d1">div1</div>
<div id="d2">div2</div>
<div id="d3">div3</div>
<div id="d4">div4</div>
</html>这对我有用。它遍历页面上的所有元素并将最大 z-index 增加 1。
请注意，当页面上的 z 索引动态增加时，此方法仍然有效：
function bring_to_front(target_id) {
const all_z = [];
document.querySelectorAll("*").forEach(function(elem) {
all_z.push(elem.style.zIndex)
})
const max_index = Math.max.apply(null, all_z.map((x) => Number(x)));
const new_max_index = max_index + 1;
document.getElementById(target_id).style.zIndex = new_max_index;
}
只需传入您想要放在前面的元素的
id