Pressing toggle button affects position of div in jQuery

Question

I tried searching for other questions that have been asked before, but I can't seem to find one that's relevant to my situation. I'll try my best to explain.

I want to be able to press the 'Tuner On' button in my project where it toggles between clearing the rectangular beige screen of any text, but at the same time, to not change the position of where it says "Metronome" at the top right corner. Every time I press the 'Tuner On' toggle button, it moves the 'Metronome' rectangle up while it clears the letter 'A'.

How do I make it so that the toggle button does not change the 'Metronome' position?

 $(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 。