A toggle script and a button that doesn't work

Question

I realize there a hundreds of threads around toggle scripts and I have been searching and looking for over a week now. I do use one and it works but only partly. It does toggle hide and show on the object it's supposed to but the button is the major problem here, at least I think it is! I want the button to always stay the the bottom of the page or be down when no toggle is open and follow the toggle up with it is clicked to open.

Right now the button is at the top when the toggle is closed and at the bottom when the toggle is open.

This is the script I'm using at the moment

<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>

And this is the button to the toggle

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

All this is supposed to toggle this part. The display: none; is there because otherwise the part I want to toggle is there from the start when i want it to be hidden from the start.

<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 -->

If it's to any use there is the CSS code for the button itself. I have tried to fixate it but that doesn't work. When I place the button above the toggle div it stays put but that also means it stays on the top of the page when I want it at the bottom.

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;

What am I doing wrong or is there another solution to my problem. I'm a beginner at this and all I know is self-learned. Well I'm hoping for the best anyway, thank you for taking the time to read this.

Answer 1

If you want the button to be stable, change it's position from static to either absolute or fixed.

position:static elements are in the normal flow of the page, so it might change position when the page layout changes.

position:fixed elements are positioned relative to the window. Even if you scroll the page fixed positioned elements will stay where it is.

absolute positioned elements will be positioned relative to the first parent having position other than static