当网页内有按钮事件会改变图片层级的情况下,如何让某一张图片一直保持在最上层的状态?

Question

1.网页内存在多张图片以及一个按钮事件,网页初次打开的时候层叠顺序是我想要的状态.但是点击了按钮之后会调整部分图片的层级,而我想让某一张图片一直保持最上层状态.
2.网上普遍的解答都是使用 z-index 来设置层级关系,但是只在初次打开网页的情况下有效.

Answer 1

这样，可以给那个图片设个id，当点击按钮时，通过事件获取图片的id值，修改style将图片z-index设置成最大，比如9999，就可以了。具体如下：

  <img id="imgId" src="...">
   ...
  <button onclick="changeImgIndex(imgId)"></button>
  ...
  <script type="text/javascript">
      function changeImgIndex(imgId){
          imgId.style.zIndex = 999;
  }
 </script>

Answer 2

用z-index