Javascript 如何将选定的 div 置于所有其他 div 之上
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4012112/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to bring the selected div on top of all other div's
提问by ssdesign
I have a bunch of divs on the screen. What I want to do is, when I select any div, I want its zIndex to be always higher than all other divs.
我在屏幕上有一堆 div。我想要做的是，当我选择任何 div 时，我希望它的 zIndex 始终高于所有其他 div。
In my application, i will need to do this repeatedly whenever I select a div, put it on top of others.
在我的应用程序中，每当我选择一个 div 时，我都需要重复执行此操作，并将其放在其他 div 之上。
Is this possible using Javascript?
这可以使用Javascript吗？
回答by Ben
Yes, very much so.
是的，非常如此。
HTML:
HTML：
<div>foo</div>
<div>bar</div>
<div>bas</div>
Javascript:
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;
}
}
}
//Edit: Sorry, forgot a brace. Corrected now.
//编辑：对不起，忘了大括号。现在更正了。
回答by StanE
In some cases, you can bring an element to top without using CSS directly. If you place your DIVs to the body tag or under another parent element, you can re-append itself to the parent. JavaScript will move it to the last position in the child list which will bring the element in a "natural" way to the top.
在某些情况下，您可以在不直接使用 CSS 的情况下将元素置于顶部。如果您将 DIV 放置到 body 标记或另一个父元素下，您可以将自身重新附加到父元素。JavaScript 会将它移动到子列表中的最后一个位置，这将使元素以“自然”的方式到达顶部。
Example:
例子：
myElement.parentNode.appendChild(myElement);
I used this trick for my custom context menu. Works without zIndex.
我在我的自定义上下文菜单中使用了这个技巧。无需 zIndex 即可工作。
回答by Isti115
I recommend setting a variable at the beginning and incrementing that.
我建议在开始时设置一个变量并增加它。
var top_z = 10;
function bringToTop(element)
{
element.style.zIndex = ++top_z;
}
(++top_z increments and then returns top_z)
（++top_z 递增，然后返回 top_z）
回答by AndreaBogazzi
I would do something like that:
我会做这样的事情：
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++;
}
on the object
在物体上
<div id="bringmeup" onclick="sendontop(this);" >somecontent</div>
or otherwise you can also use
否则你也可以使用
sendontop("bringmeup");
i came across this problem and solved like that
我遇到了这个问题并就这样解决了
回答by Hasan Tuna Oru?
Hope it helps!
希望能帮助到你！
document.getElementById("mainactiondiv").firstElementChild.appendChild(bubble);
回答by Banana999
This worked for me (a modified version of Ben's solution, because it generated so many errors). When you click the element, it should go to the top. Hope it helps!
这对我有用（Ben 解决方案的修改版本，因为它产生了很多错误）。当您单击该元素时，它应该会转到顶部。希望能帮助到你！
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>