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

我建议在开头设置一个变量并递增它。

var top_z = 10;

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

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

Answer 3

在某些情况下，您可以直接将元素置于顶部而不使用CSS。如果将DIV放置在body标签或另一个父元素下，则可以将其自身重新附加到父级。 JavaScript会将它移动到子列表中的最后一个位置，这将使元素处于＆＃34; natural＆＃34;通往顶端的方式。

示例：

myElement.parentNode.appendChild(myElement);

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

Answer 4

我会做那样的事情：

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");

我遇到了这个问题并且像那样解决了

Answer 5

希望它有所帮助！

document.getElementById("mainactiondiv").firstElementChild.appendChild(bubble);

Answer 6

这对我有用（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>

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

6 个答案: