Как вывести выбранный div поверх всех остальных div - PullRequest
Новая
       1

Как вывести выбранный div поверх всех остальных div

6 голосов
/ 25 октября 2010

У меня есть куча div на экране.Что я хочу сделать, так это то, что когда я выбираю любой div, я хочу, чтобы его zIndex всегда был выше, чем у всех других div.

В моем приложении мне нужно будет делать это повторно всякий раз, когда я выбираю div, помещаюэто поверх других.

Возможно ли это с помощью Javascript?

Ответы [ 6 ]

8 голосов
/ 25 октября 2010

Да, очень сильно.

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

// Редактировать: Извините, забыл скобку.Исправлено сейчас.

5 голосов
/ 17 декабря 2015

В некоторых случаях вы можете вывести элемент на вершину, не используя CSS напрямую. Если вы поместите свои DIV в тег body или в другой родительский элемент, вы можете повторно добавить себя в родительский элемент. JavaScript переместит его на последнюю позицию в дочернем списке, что естественным образом приведет элемент к вершине.

Пример: 

myElement.parentNode.appendChild(myElement);

Я использовал этот трюк для своего пользовательского контекстного меню. Работает без zIndex.

5 голосов
/ 15 февраля 2013

Я рекомендую установить переменную в начале и увеличивать ее. 

var top_z = 10;

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

(++ top_z увеличивается, а затем возвращает top_z)

0 голосов
/ 11 мая 2019

Это сработало для меня (модифицированная версия решения Бена, потому что она вызвала столько ошибок)Когда вы нажимаете на элемент, он должен идти вверх.Надеюсь, это поможет! 

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>
0 голосов
/ 11 июля 2016

Надеюсь, это поможет! 

document.getElementById("mainactiondiv").firstElementChild.appendChild(bubble);
0 голосов
/ 20 августа 2013

Я бы сделал что-то подобное: 

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

я сталкивался с этимпроблема и решена так

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...