一個切換腳本和一個不起作用的按鈕

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