一个切换脚本和一个不起作用的按钮

Question

我意识到切换脚本有数百个线程，我已经搜索和寻找一个多星期了。我确实使用了一个，它有效，但只是部分有效。它确实在它应该的对象上切换隐藏和显示，但按钮是这里的主要问题，至少我认为是！我希望按钮始终保持在页面底部，或者在没有打开切换时处于向下状态，并在单击打开时跟随切换向上。

现在，当开关关闭时，按钮位于顶部，而当开关打开时，按钮位于底部。

这是我目前正在使用的脚本

<script>
    var toggle = function() {
    var mydiv = document.getElementById('toggle-footer');
        if (mydiv.style.display === 'block' || mydiv.style.display === '')
            mydiv.style.display = 'none';
        else
            mydiv.style.display = 'block'
                            }
</script>

这是切换按钮

<center><div type="submit" class="togglebtn" onclick="toggle();">Meny</div></center>

所有这些都应该切换这部分。显示：无；是否在那里，否则我想要切换的部分从一开始就在那里，当我希望它从一开始就隐藏时。

<div id="toggle-footer" style="display:none;"> <!-- Beginning toggle-footer -->
<div class="container"> <!-- Beginning container -->
and some content in here
</div> <!-- End container-->
</div> <!-- End band-toggle -->

如果有任何用途，按钮本身的 CSS 代码。我试图修复它，但这不起作用。当我将按钮放在切换 div 上方时，它会保持原样，但这也意味着当我希望它位于底部时，它会保持在页面顶部。

CSS

.togglebtn {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
background-color:#ededed;
-webkit-border-top-left-radius:15px;
-moz-border-radius-topleft:15px;
border-top-left-radius:15px;
-webkit-border-top-right-radius:15px;
-moz-border-radius-topright:15px;
border-top-right-radius:15px;
-webkit-border-bottom-right-radius:0px;
-moz-border-radius-bottomright:0px;
border-bottom-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-bottomleft:0px;
border-bottom-left-radius:0px;
text-indent:0;
border:1px solid #dcdcdc;
display:inline-block;
color:#777777;
font-family:Arial;
font-size:15px;
font-weight:normal;
font-style:normal;
height:23px;
line-height:23px;
width:75px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #ffffff;
position: static;
bottom: 0xp;

}
.togglebtn:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
background-color:#dfdfdf;
}.togglebtn:active {
position:relative;
top:1px;

我做错了什么，或者我的问题是否有其他解决方案。我是这方面的初学者，我所知道的都是自学的。好吧，无论如何我都希望是最好的，感谢您抽出宝贵的时间阅读本文。

Answer 1

如果您希望按钮稳定，请将其位置从static 更改为absolute 或fixed。

position:static元素在页面的正常流动中，所以当页面布局发生变化时，它可能会改变位置。

position:fixed 元素相对于窗口定位。即使您滚动页面fixed，定位的元素也将保持在原处。

absolute 定位元素将相对于第一个父元素定位，其位置不是static