The links on my page are not working

Question

So im doing some basic code for a school project and the latest part im on has me stuck, everything is finished so far but my links no longer work, ive tried placing them on different parts of the page but nothing still. Anyway Ive looked in firebug and elsewhere and done some searching, a lot of people had this issue because they had another object above their links, ive checked and I personally cant see anything. Would anyone be able to help me.

Edit: I just found out why it was behind, I have my z-index set in my wrapper which is blocking it. The issue now is when I remove it i loose my header image, does anyone have a way I can keep the text above the header image and keep the links working?

This is the site page

   #wrapper {
    position: relative;
    width: 100%;
    margin: 5px auto;
    background-color: #e7e9fd;
    z-index: -2;
}

   #header {
    width: 100%;
    padding-bottom: 1%;
}

#headerImage {
    width: 960px;
    border-bottom: solid #5677fc;
    position:absolute;
    z-index: -1;
}

.headerText {
    font-family:Arial, Helvetica, sans-serif;
    -webkit-text-stroke: 1px black;
    color: white;
    text-shadow: 3px 3px 0 #000, 
                 -1px -1px 0 #000, 
                 1px -1px 0 #000, 
                 -1px 1px 0 #000, 
                 1px 1px 0 #000;
    font-size: 250%;
    position: inherit;
    z-index: -1;
    padding-top: 4%;
    padding-bottom: 4%;
    padding-left: 2%;
}

Answer 1

The problem is with your #wrapper. Change that z-index of wrapper to z-index: 0; and that will let you click on the links and also highlight all the text.