我的代码看起来不是我想要的样子

Question

这是我写的代码。它工作得很好，但有一个小问题。当我按下缩放按钮来缩放一张图片时。图片变得更大，覆盖了按钮。我如何解决这个问题？(我希望我的图片在我按下缩放按钮时增长，但我不希望它们覆盖按钮)

​

var images = document.querySelectorAll('img.images');
var displayCount = 0;
var hideCount = 0;
document.getElementById('display').onclick = function() {
  if (hideCount < images.length) {
    images[hideCount].style.display = 'none';
    zoomOut(images[hideCount]);
    hideCount++;
  } else {
    images[displayCount].style.display = 'block';
    zoomOut(images[displayCount]);
    displayCount++;
    if (displayCount === images.length) {
      displayCount = 0;
      hideCount = 0;
    }
  }
}
document.getElementById('zoombtn').onclick = function() {
  if (hideCount > 0) {
    images[hideCount - 1].style.display = 'block';
    zoomIn(images[hideCount - 1]);
    hideCount--;
  } else {
    images[11].style.display = 'block';
    zoomIn(images[11]);
  }
}

function zoomIn(zElement) {
  var element = document.getElementById(zElement.id);
  element.style.transform = "scale(2)";
  //element.style.width *= 2;
}

function zoomOut(zElement) {
  var element = document.getElementById(zElement.id);
  element.style.transform = "scale(1)";
}

.botton {
  height: 30px;
  width: 405px;
}

.table {
  margin-left: 0;
  text-align: center;
}

h3 {
  margin-left: 325px;
}

h4 {
  margin-left: 290px;
}

<button class="botton" ; id="display" ;>Display</button>
<button class="botton" ; id="zoombtn" ;>Zoom</button>
<br></br>
<table class="table">
  <tr>
    <td>
      <img SRC="blfy.gif" ALT="Butterflies" id="image-1" class="images" height="200" width="200" />
    </td>
    <td>
      <img SRC="eye.gif" ALT="Eye" id="image-2" class="images" height="200" width="200" />
    </td>
    <td>
      <img SRC="wave.gif" ALT="Wave" id="image-3" class="images" height="200" width="200" />
    </td>
    <td>
      <IMG SRC="jungle.gif" ALT="Jungle" id="image-4" class="images" height="200" width="200" />
    </td>
  </tr>
  <tr>
    <td>
      <IMG SRC="bridge.gif" ALT="Bridge" id="image-5" class="images" height="200" width="200" />
    </td>
    <td>
      <IMG SRC="duck.gif" ALT="Duck" id="image-6" class="images" height="200" width="200" />
    </td>
    <td>
      <IMG SRC="egg.gif" ALT="Eggs" id="image-7" class="images" height="200" width="200" />
    </td>
    <td>
      <IMG SRC="aurora.gif" ALT="Aurora" id="image-8" class="images" height="200" width="200" />
    </td>
  </tr>
  <tr>
    <td>
      <IMG SRC="it.gif" ALT="Technology" id="image-9" class="images" height="200" width="200" />
    </td>
    <td>
      <IMG SRC="hill.gif" ALT="Hills" id="image-10" class="images" height="200" width="200" />
    </td>
    <td>
      <IMG SRC="string.gif" ALT="strings" id="image-11" class="images" height="200" width="200" />
    </td>
    <td>
      <IMG SRC="vegi.gif" ALT="vegetables" id="image-12" class="images" height="200" width="200" />
    </td>
  </tr>
</table>

​

Answer 1

我建议使用z-index

请参阅z-index example

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