Z-index Not Working With Absolute Position

If you take a look at my test website here you will see that the 'Scroll Down' button is overlapping all my content, no matter what z-index I input. Is there a way to fix this issu

Solution 1:

z-index becomes effective only for elements that have attribute position with value absolute or fixed or relative. Elements with position: static (which is the default for all elements) will not be affected by the z-index.

Easiest way in your case, add position: relative to .header, so your header tag becomes like this:

.header {
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1000;
    position: relative;/* this will fix it */
}

Solution 2:

If you want to push your scroll div under the header then use z-index:999 in .top-bar class so top-bar will come above the scroll bar text and you are done.

.top-bar {
 z-index:999;
}

Solution 3:

The problem you have is with "Object" tag. Tags like OBJECT, EMBED,FRAME (and SELECT in some previous browser versions) are rendered as part of window model and does not respect z-index. The classic approach is to put the top content in iframe. In your case I can not understand why you need Object tag for simple button. Just change it with image.