html - 当相互重叠时，使图像在点击时出现在前面

Question

我有一些图片，我希望在点击它们时出现在前面。我需要将其他人保持在他们的相对位置并订购相同的东西。不确定执行此操作的好方法。我附上了一张图片，可以帮助您进一步理解我在下面的意思:

Answer 1

使用代码如下:设置z-index onclick img

function myFunction(x) {
  var elem = document.querySelectorAll(".img");
  for(var i=0;i<elem.length;i++){
    elem[i].style.zIndex = -1*i;
  }
  x.style.zIndex='2';
}

.img{
width:100px;
height:100px;
position: absolute;
border:2px solid black;
}
.img:nth-child(1) {
   left:75px;
   z-index:1;
   }
.img:nth-child(2) {
    left:150px;
    z-index:-1;}
.img:nth-child(3) {
     left:225px;
     z-index:-2;}
.img:nth-child(4) {
    left:300px;
    z-index:-3;}

<img src="/image/3mG2d.jpg" onclick="myFunction(this)" class="img"/>
<img src="/image/3mG2d.jpg" onclick="myFunction(this)" class="img"/>
<img src="/image/3mG2d.jpg" onclick="myFunction(this)" class="img"/>
<img src="/image/3mG2d.jpg" onclick="myFunction(this)" class="img"/>