div stays on top but should move with the site - html

Question

I´m getting crazy here. I designed a site, scrolling from left to the right, but I can´t get the content for each ¨page¨ scrolling.
Instead the content sticks on top.
Please have a look here
The button (skull with pistons and info text) should stick on the page and move if navigation gets clicked
here is the code:
<div id="section_home" class="section_holder1"><!-- BEGIN SECTION "HOME -->
<div class="container"><!-- BEGIN CONTAINER -->
<div class="section_content"><!-- Begin Section Container -->
<div class="content_container"><!-- Begin Content -->
<div class="logo"></div>
<div class="separator"></div>
<div class="sign1">
<a class="readmore" href="#"></a>
</div>
</div><!-- End Content -->
</div><!-- End Section Container -->
</div><!-- END CONTAINER -->
</div><!-- END SECTION "HOME -->
Any idea what I´m doing wrong here?

Answer 1

Basically you problem is here:
.sign1 a.readmore {
display: block;
width: 65px;
height: 67px;
text-indent: -9999em;
z-index: 999999;
margin: 0 auto;
background-image: url(../img/bg-readmore.png);
position: fixed; /* --> position fixed is not what you're looking for */
top: 48%;
right: 43%;
}
Settins position:fixed does exactly what you see (fixing the element's position relative to the browser window.. it is no longer effected by page structure) you have in the middle all the buttons from all the frames on top of each other.
Try repositioning .sign1 a.readmore using position:absolute