Javascript 我的代码没有'；I don’我看起来不像我想要的样子

这是我写的一段代码。它工作正常，但有一个小问题。 当我按下缩放按钮缩放图片时。图片变得更大，覆盖了按钮。如何解决此问题？（我希望在按下“缩放”按钮时图片会变大，但不希望它们覆盖该按钮）

var images=document.querySelectorAll（'img.images'）；
var displayCount=0；
var hideCount=0；
document.getElementById（'display'）。onclick=function（）{
if（hideCount0）{
图像[hideCount-1].style.display='block'；
缩放（图像[hideCount-1]）；
隐居--；
}否则{
图像[11]。style.display='block'；
缩放（图像[11]）；
}
}
功能缩放（zElement）{
var元素=document.getElementById（zElement.id）；
element.style.transform=“比例（2）”；
//element.style.width*=2；
}
功能zoomOut（zElement）{
var元素=document.getElementById（zElement.id）；
element.style.transform=“比例（1）”；
}

.botton{
高度：30px；
宽度：405px；
}
.桌子{
左边距：0；
文本对齐：居中；
}
h3{
左边距：325px；
}
h4{
左边距：290px；
}

显示
快速移动

我建议使用z-index

看

.botton {
  height: 30px;
  width: 405px;
  z-index: 999;
  background-color:rgba(255, 255, 255, 0.5);
}