如何將選定的div放在所有其他div的頂部

我在屏幕上有一堆div。我想要做的是，當我選擇任何div時，我希望它的zIndex始終高於所有其他div。如何將選定的div放在所有其他div的頂部

在我的應用程序中，我需要重複執行此操作，只要我選擇一個div，將其放在其他位置上。

這是可能使用Javascript？

2010-10-25 ssdesign

是的，非常非常。

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; 
     } 
    } 
}

//編輯：對不起，忘了梅開二度。現在更正。

來源

2010-10-25 06:00:43 Ben

從來不知道'z-index'依賴'position：relative'我只是認爲它有問題......這是這裏的重要部分。 – CuddleBunny 2015-10-15 16:11:07

我建議在開始處設置一個變量並遞增該變量。

var top_z = 10; 

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

（++ top_z遞增，然後返回top_z）

來源

2013-02-15 00:14:27 Isti115

我會做這樣的事情：

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

我遇到了這個問題，並解決了這樣的

來源

2013-08-20 12:31:01 AndreaBogazzi

在某些情況下，你可以把不直接使用CSS頂部的元素。如果您將您的DIV放置到body標籤或另一個父元素下，則可以將其自身重新附加到父項。 JavaScript會將它移動到子列表中的最後一個位置，這將使元素以「自然」的方式到達頂部。

例子：

我用這一招對我的自定義上下文菜單。沒有zIndex的作品。

來源

2015-12-17 14:34:22 StanE

希望它有幫助！

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

來源

2016-07-11 15:30:36

如何將選定的div放在所有其他div的頂部

回答

相關問題