主页 / 问题 / 1594016
Accepted
alexWithoutBeard
Asked:2024-09-16 23:50:07 +0000 UTC2024-09-16 23:50:07 +0000 UTC

单击一个 div 使其位于其他 div 之上

  • 772

有几个绝对定位的div并且互相重叠。我试图做到这一点，以便当单击一个 div 时，它会出现在其他 div 之上。 

 let divs = document.querySelectorAll("div");
  for (const div of divs) {
    div.addEventListener("click", function () {
      console.log(div.style.position);
      if (div.style.position === "absolute")
        div.style.position = "relative";
      else div.style.position = "absolute";
    });
  }
  <div style="background-color: 'red'; position: absolute">vfvf</div>
<div style="position: absolute">dasdasdasdasdasd</div>

我尝试了通过 z-index 和上面的代码，但显然我没有仔细阅读文档，因为没有任何效果

javascript

1 个回答

  1. Best Answer

    在我看来，应该使用它z-index，以便div它位于div其余部分之上

    let divs = document.querySelectorAll("div");
let maxZIndex = 1; //максимальный z-index

for (const div of divs) {
  div.addEventListener("click", function() {
    maxZIndex++; //увеличиваем индекс
    div.style.zIndex = maxZIndex;
  });
}
    div {
  width: 100px;
  height: 100px;
  position: absolute;
}

.red {
  background-color: red;
  top: 50px;
  left: 50px;
}

.blue {
  background-color: blue;
  top: 100px;
  left: 100px;
}

.green {
  background-color: green;
  top: 150px;
  left: 150px;
}
    <div class="red">Red</div>
<div class="blue">Blue</div>
<div class="green">Green</div>

    • 4

相关问题