彼此重叠时使图像位于点击前

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="https://i.stack.imgur.com/3mG2d.jpg" onclick="myFunction(this)" class="img"/>
<img src="https://i.stack.imgur.com/3mG2d.jpg" onclick="myFunction(this)" class="img"/>
<img src="https://i.stack.imgur.com/3mG2d.jpg" onclick="myFunction(this)" class="img"/>
<img src="https://i.stack.imgur.com/3mG2d.jpg" onclick="myFunction(this)" class="img"/>