Question

这是我的HTML结构：

<div class="pageSlider">
    <a href="#lounge" class="active">Visitor's Lounge</a>
    <a href="#streams">News Stream</a>
    <a class="slide-button"></a>
</div>

这是我的CSS规则：

.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;
}

.pageSlider .slide-button设置为z-index: 1，.pageSlider a[href]设置为z-index: 2，但较低的z-index实际上与较高的重叠。

我在某种程度上需要注意链接下的.slide-button，但我似乎无法找到更好的方法。

现场演示：

(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">
    <a href="#lounge" class="active">Visitor's Lounge</a>
    <a href="#streams">News Stream</a>
    <a class="slide-button"></a>
</div>

Answer 1

你忘了添加：

position:relative;

链接上的

（.pageSlider a[href]）。 z-index仅适用于定位元素。

较低的z指数重叠较高

1 个答案: