按下切换按钮会影响DIV在jQuery中的位置

Question

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

我希望能够按我的项目中的"调谐器"按钮，在清除任何文本的矩形米色屏幕之间可以切换，但与此同时，不要更改其说" mentronome"的位置在右上角。每次我按"调谐器"切换按钮时，它会在清除字母'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>

我的jsfiddle

Answer 1

诀窍是使用visibility:hidden代替display:none。