Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Чтобы функция делала z-index:1 для блоков (https://javascript.ru/forum/misc/79780-chtoby-funkciya-delala-z-index-1-dlya-blokov.html)

Владислав_Со 23.03.2020 20:09

Чтобы функция делала z-index:1 для блоков
 
Добрый вечер! Можно ли написать такую функцию, чтобы при срабатывании другой функции, все блоки div в секии присваивали себе z-index:1 ?? (так как каждый блок имеет свой z-index) /

При использовании этого
<div class="lightbox">
    <input type="checkbox" id="case-1" class="lightbox1"/>
    <label for="case-1"> View case study</label>
    <div><div>
        <label for="case-1"></label>
        <div>
            <div>ParkApp<label for="case-1">✖</label></div>
            <div><img src="./images/case_study1.1.jpg" alt=""></div>
        </div>
    </div></div>
</div>


а вот его js
var inp = document.getElementsByClassName("lightbox_view");
for (var i = 0; i < inp.length; i++) {
  inp[i].onclick = function() {
    document.documentElement.style.overflow = this.checked ? "hidden" : "auto";
    document.documentElement.style.marginRight = this.checked ? "17px" : "";
    document.documentElement.style.zIndex = this.checked ? "999" : "auto";
  };
}


Чтобы избежать вот этого безобразия
*** Огромная картинка ***

voraa 24.03.2020 10:04

document.documentElement.style.overflow = this.checked ? "hidden" : "auto";

Это как то странно.
documentElement - это весь документ. Вернее элемент <html>. В нем содержится все остальное.

Но не понятно, каким именно блокам и в какой секции нужно присвоить z-index

voraa 24.03.2020 10:35

Не знаю, правильно ли я понимаю вашу задачу.
Но мне она представляется так
Есть некий контейнер , в котором содержатся блоки (12 шт), которые на экране перекрываются. И при клике на блок (или любой любой элемент внутри этого блока) этот блок должен оказаться в самом верху так, что бы его ничего не перекрывало.
<div id='cont'>
   <div class="lightbox">
      ......
   </div>

   <div class="lightbox">
      ......
   </div>
   ......
   <div class="lightbox">
      ......
   </div>
</div>

Правильно?

Если так, то не нужны никакие z-index.
Просто переставляем вверх блок, на который кликнули

const cont = document.getElementById('cont')
cont.querySelectorAll('.lightbox').forEach (dlb => dlb.addEventListener('click', () => cont.appendChild(dlb) ))


Можно и немного по-другому

const cont = document.getElementById('cont')
cont.addEventListener('click', (ev) => {
   const dbl = ev.target.closest('.lightbox')
   if (dbl) cont.appendChild(dlb)
})


Часовой пояс GMT +3, время: 11:02.