Позиционирование элементов?

Question

let dv = document.querySelector("#dv");
let dv1 = document.querySelector("#dv1");
let dv2 = document.querySelector("#dv2");
let dv3 = document.querySelector("#dv3");

let divs = dv.querySelectorAll('div');
let i = 1;
for (let div of divs) {
  div.addEventListener('click', function() {
    if (!this) {
      div.removeAttribute('z-index');
    } else {
      this.setAttribute('z-index', i++);
    }
  })
}

#dv {
  position: relative;
  box-sizing: border-box;
  width: 1050px;
  height: auto;
  margin: 20px auto;
  background-color: aquamarine;
  border: 2px solid black;
  overflow: hidden;
}

#dv1 {
  position: relative;
  background: rgb(238, 144, 229);
  width: 450px;
  height: 250px;
  left: 270px;
  top: 10px;
}

#dv2 {
  position: relative;
  background: rgb(153, 144, 238);
  width: 450px;
  height: 250px;
  left: 290px;
  top: -12.8em;
}

#dv3 {
  position: relative;
  background: rgb(238, 144, 144);
  width: 450px;
  height: 250px;
  left: 310px;
  top: -25.8em;
}

<div id="dv">
  <div id="dv1">z-index: 1</div>
  <div id="dv2">z-index: 2</div>
  <div id="dv3">z-index: 3</div>
</div>

При добавлении диву z-index он должен стать поверх прочих дивов. Но этого не происходит. Что не так в коде?

Answer 1

При добавлении диву z-index он должен стать поверх прочих дивов. Но этого не происходит. Что не так в коде?

Нужно нечто такое?

const divs = dv.querySelectorAll('div');
const i = divs.length;
for (let div of divs) {
  div.addEventListener('click', function() {
    divs.forEach(o => o.style.zIndex = 0)
    this.style.zIndex = i;
  })
}

#dv {
  position: relative;
  box-sizing: border-box;
  width: 1050px;
  height: auto;
  margin: 20px auto;
  background-color: aquamarine;
  border: 2px solid black;
  overflow: hidden;
}

#dv1 {
  position: relative;
  background: rgb(238, 144, 229);
  width: 450px;
  height: 250px;
  left: 270px;
  top: 10px;
}

#dv2 {
  position: relative;
  background: rgb(153, 144, 238);
  width: 450px;
  height: 250px;
  left: 290px;
  top: -12.8em;
}

#dv3 {
  position: relative;
  background: rgb(238, 144, 144);
  width: 450px;
  height: 250px;
  left: 310px;
  top: -25.8em;
}

<div id="dv">
  <div id="dv1">z-index: 1</div>
  <div id="dv2">z-index: 2</div>
  <div id="dv3">z-index: 3</div>
</div>

БЛОГ НА HUSL

Позиционирование элементов?

Ответы (1 шт):