HTML&CSS: Foundation as floating div on the fullpage.js plugin

I'm trying to use foundation as a floating div on top of my fullpage The foundation has some interactive elements in it (changing text sizes, etc)

example can be seen here: http://ift.tt/1bE9L1n

everything is working so far so good the only problem is that the content of the slides moves aswel when the text in foundation div moves... (i'd like the content of the slides to stay at the same place)

is my div not floating afterall? been looking for hours now and cant really find the problem. Anyone has a clue what I'm doing wrong?

The interactive foundation is btw not affecting the on scroll rotating 'Athene' text (= which is good)

this is the css I used for the foundation div

#foundation {
    position:absolute;
    height: 100%;
    display:block;
    width: 100%;
    background: transparent;
    z-index:999;
}

Thanks in advance & Best Regards to all of you