如何使按钮跟随div滑块切换

Question

我正在创建一个导航栏，当我点击按钮时可以切换。这已经完成了，但我的按钮固定在同一个地方，我想让它跟随我的滑动导航条的移动。我该怎么做？

$(document).ready(function() {
$("#flip").click(function() {
$("#panel").slideToggle("slow");
});
});

.main_menu {
position: fixed;
top: 0;
background-color: #358ef3;
height: 9rem;
width: 100%;
}
.wideScreen {
margin-top: -0.625rem;
width: 4rem;
height: 1rem;
position: fixed;
top: 9rem;
left: 0;
}
.wideScreen>button {
width: 100%;
height: 100%;
}
.wideScreen>button>img {
width: 100%;
height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main_menu" id="panel">
<form class="" action="index.html" method="post">
<div class="slidecontainer">
<h2>Bac+: <span id="output"></span></h2>
<label for="myRange"></label><input type="range" min="1" max="8" value="0" class="slider" id="myRange">
</div>
</form>
</div>
<div class="wideScreen">
<button id="flip">
</button>
</div>

Answer 1

按钮为什么不能在它所属的元素(表头(内？

$(document).ready(function() {
$("#flip").click(function() {
$("#panel-inner").slideToggle("slow");
});
});

body {
padding: 0;
margin: 0;
}
#panel {
position: fixed;
top: 0;
width: 100%;
}
.main_menu {
background-color: #358ef3;
height: 9rem;
overflow: hidden;
}
.wideScreen {
width: 4rem;
height: 1rem;
}
.wideScreen>button {
width: 100%;
height: 100%;
}
.wideScreen>button>img {
width: 100%;
height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="panel">
<div id="panel-inner" class="main_menu">
<form class="" action="index.html" method="post">
<div class="slidecontainer">
<h2>Bac+: <span id="output"></span></h2>
<label for="myRange"></label>
<input type="range" min="1" max="8" value="0" class="slider" id="myRange">
</div>
</form>
</div>
<div class="wideScreen">
<button id="flip">
</button>
</div>
</div>

Answer 2

替换以下CSS规则

.wideScreen {
margin-top: -0.625rem;
width: 4rem;
height: 1rem;
position: fixed;
top: 9rem;
left: 0;
}

带有

.wideScreen {
margin-top: -0.625rem;
width: 4rem;
height: 1rem;
top: 9rem;
left: 0;
}

问题是由于固定的定位。