javascript - 按下切换按钮会影响 jQuery 中 div 的位置

Question

我尝试搜索之前提出的其他问题，但似乎找不到与我的情况相关的问题。我会尽力解释。

我希望能够在我的元素中按下“Tuner On”按钮，它可以在清除任何文本的矩形米色屏幕之间切换，但同时不改变它显示“节拍器”的位置在右上角。每次我按下“Tuner On”切换按钮时，它都会向上移动“Metronome”矩形，同时清除字母“A”。

如何使切换按钮不会改变“节拍器”的位置？

$(document).ready(function() {
  $("button.GreyRectangle1").click(function() {
    $("div.ReceivedNote").toggleClass('ReceivedNote1');
  })
})

.ReceivedNote {
  z-index: 4;
}

.ReceivedNote1 {
  display: none;
}

.metronome-box {
  position: fixed;
}

.Metronome {
  font-family: arial;
  color: white;
  background-color: black;
  transform: scaleX(1.2);
  font-size: 0.5em;
  height: 10px;
  width: 60px;
  border-radius: 3px;
  margin-top: -17px;
  margin-left: 185px;
  z-index: 2;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="Orange">
  <div class="ReceivedNote">A</div>
  <div class="metronome-box">
    <div class="Metronome">METRONOME</div>
  </div>
</div>
<div class="top-trapezoid"></div>
<div class="right-trapezoid"></div>
<div class="bottom-trapezoid"></div>
<div class="left-trapezoid"></div>
<p class="tuner-on">TUNER ON</p>
<button class="GreyRectangle1">
  <div class="InnerGreyDot" style="margin-top: 2px;"></div>
</button>

my jsfiddle

Answer 1

诀窍是使用 visibility:hidden 而不是 display:none。