Lower z-index overlaps higher - css

Question

This is my HTML structure:
<div class="pageSlider">
Visitor's Lounge
News Stream
<a class="slide-button"></a>
</div>
And here are my CSS rules:
.pageSlider {
margin: 15px auto !important;
font-size: 1.2em;
white-space: nowrap;
height: 35px;
}
.pageSlider a[href] {
display: inline-block;
text-align: center;
text-decoration: none;
z-index: 2;
}
.pageSlider a[href].active {
color: #000;
}
.pageSlider .slide-button {
background-color: #cccc00;
position: relative;
top: -35px;
display: inline-block;
height: 35px;
padding: 0;
float: left;
height: inherit;
z-index: 1;
}
The .pageSlider .slide-button is set to z-index: 1 and .pageSlider a[href] is set to z-index: 2, but the lower z-index actually overlaps the higher.
I somehow need toget the .slide-button under the links, but I can't seem to figure out a better way.
Live demo:
(function(e){e.parseURL=function(e){if(typeof e==="undefined"&&typeof window.location.href!=="undefined")e=window.location.href;var t={whole:/^((http|https):\/\/)?((.*\.)?.*\..*|localhost|\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})\/.*/,protocol:/^(http|https):\/\//,absolute:/^\/\/((.*\.)?.*\..*|localhost|\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})\//,relative:/^[\/](?!\/).*(\..*|\/)?.*$/,params:/\?.*=.*(\&.*\=.*)+[^#.*]/},n={protocol:undefined,hostname:undefined,hash:undefined,href:{original:undefined,noparams:undefined},parentDomain:undefined,parameters:undefined,pathname:{nohash:undefined,withhash:undefined},type:undefined};if(typeof e!=="string")throw new TypeError("Argument must be a string!");else if(!t.whole.test(e)&&!t.absolute.test(e)&&!t.relative.test(e))throw new Error("Invalid string");n.href.original=e;if(e.indexOf("#")!==-1){n.hash=e.substring(e.indexOf("#"));e=e.substring(0,e.indexOf("#"))}if(t.params.test(e)){n.parameters={};var r=e.match(t.params)[0].substring(1).split("&");for(var i=0,s=r.length;i<s;i++){var o=r[i].split("=");n.parameters[o[0]]=o[1]}e=e.replace(t.params,"");n.href.noparams=e+(typeof n.hash!=="undefined"?n.hash:"")}if(t.protocol.test(e)){n.protocol=e.match(t.protocol)[0];n.hostname=e.replace(t.protocol,"");n.hostname=n.hostname.substring(0,n.hostname.indexOf("/"));n.parentDomain=n.hostname.split(".");n.parentDomain.splice(0,1);n.parentDomain=n.parentDomain.join(".");if(n.parentDomain=="")n.parentDomain=n.hostname;var u=e.replace(t.protocol,"");n.pathname.nohash=u.substring(u.indexOf("/"));u=undefined;n.type="normal"}else{n.protocol=window.location.href.match(t.protocol)[0];if(t.absolute.test(e)){var u=e.replace(/^\/\//,"");n.hostname=u.substring(0,u.indexOf("/"));n.pathnam.nohashe=u.substring(u.indexOf("/"));n.type="absolute";n.href.original=n.href.original.replace(/^\/\//g,n.protocol)}else if(t.relative.test(e)){n.hostname=window.location.href.replace(t.protocol,"");n.hostname=n.hostname.substring(0,n.hostname.indexOf("/"));n.pathname.nohash=n.href.original;n.type="relative"}else{throw new Error("Invalid string")}}n.pathname.withhash=n.pathname.nohash+n.hash;return n};if(typeof e(".pageSlider")[0]!=="undefined"){e.pageSlider=function(t){if(t==="update"){e('.pageSlider a.active:not([href="'+e.parseURL().hash+'"])').removeClass("active");e('.pageSlider a[href="'+e.parseURL().hash+'"]').addClass("active");e(".pageSlider").each(function(){var t=e(this);var n=t.find("a.slide-button");var r=t.find("a[href]");var i=r.size();var s=100/i;var o=r.index("a.active");r.css("width",s+"%");console.log(o);n.css("width",s+"%").animate({left:o*-1*s+"%"})});return e('.pageSlider a.active[href="'+e.parseURL("/index.php").hash+'"]')}};window.location.hash="lounge";e.pageSlider("update");e(window).on("hashchange",function(){e.pageSlider("update")})}})(jQuery)
.pageSlider {
margin: 15px auto !important;
font-size: 1.2em;
white-space: nowrap;
height: 35px;
}
.pageSlider a[href] {
display: inline-block;
text-align: center;
text-decoration: none;
color: #fff;
z-index: 2;
}
.pageSlider a[href].active {
color: #000;
}
.pageSlider .slide-button {
background-color: #cccc00;
position: relative;
top: -35px;
display: inline-block;
padding: 0;
float: left;
height: inherit;
z-index: 1;
}
body{background-color:#777}#media all and (max-width: 500px){.pageSlider{white-space: normal}.pageSlider a[href]{display: block !important;width: 100% !important}.pageSlider [href].active {background-color: #cccc00}.pageSlider .slide-button{display: none}}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pageSlider">
Visitor's Lounge
News Stream
<a class="slide-button"></a>
</div>

Answer 1

You forgot to add:
position:relative;
on your link (.pageSlider a[href]). z-index only applies to positioned elements.