我现在不想实现动画效果，一点击图片就直接定位到下面了，是我的层级有问题吗，我是照着源代码自己写的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Background</title>
<style type="text/css">
html,body{
height:100%;
}
img .bg{
height: 100%;
width:100%;
position:fixed;
top:0;
left:0;
z-index:1;
}
.slider{
position: absolute;
width: 100%;
text-align: center;
bottom: 100px;
}
.slider li{
position: relative;
display: inline-block;
width: 170px;
height: 130px;
margin-right: 15px;
z-index: 777;
}
.slider a{
display: inline-block;
width: 170px;
position: relative;
padding-top: 70px;
padding-bottom: 20px;
border: 2px solid #fff;
border-radius: 5px;
color:#fff;
cursor:pointer;/*手*/
z-index: 888;
}
.slider li:nth-of-type(1) a{
background-color: #02646e;
}
.slider li:nth-of-type(2) a{
background-color: #eb0837;
}
.slider li:nth-of-type(3) a{
background-color: #67b374;
}
.slider li:nth-of-type(4) a{
background-color: #e6674a;
}
.slider li:nth-of-type(5) a{
background-color: #e61061;
}
a::after{
content: "";
display: block;
height: 120px;
width: 120px;
border: 5px solid #fff;
border-radius: 50%;
position: absolute;
top: 50%;
left:50%;
top: -80px;
margin-left: -60px;
z-index: 9999;
}
li:nth-of-type(1) a:after{
background: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg1.jpg) no-repeat center;
}
li:nth-of-type(2) a:after{
background: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg2.jpg) no-repeat center;
}
li:nth-of-type(3) a:after{
background: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg3.jpg) no-repeat center;
}
li:nth-of-type(4) a:after{
background: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg4.jpg) no-repeat center;
}
li:nth-of-type(5) a:after{
background: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg5.jpg) no-repeat center;
}
a::before{
content:"";
display: block;
height: 120px;
width: 120px;
border: 5px solid #fff;
border-radius: 50%;
position: absolute;
left: 50%;
margin-left: -60px;
z-index: 99999;
top: -80px;
background: rgba(0,0,0,0.3);
}
a:hover:before{
opacity:0;
}
.slideLeft:target{
z-index: 100;
}
.slideBottom:target{
z-index: 100;
}
.zoomln:target{
z-index: 100;
}
.zoomOut:target{
z-index: 100;c
}
.rotate:target{
z-index: 100;
}
.bg:not(:target){
z-index: 1;
}
</style>
</head>
<body>
<div>
<ul>
<li><a href="#bg1">Hipster Fashion Haircut</a></li>
<li><a href="#bg2">Cloud Computing Services & Consulting</a></li>
<li><a href="#bg3">My haire is sooo fantastic!</a></li>
<li><a href="#bg4">Eat healthy & excersice!</a></li>
<li><a href="#bg5">Lips so kissable I could die ...</a></li>
</ul>
</div>
<img src="http://www.w3cplus.com/demo/css3/CSS3Fullbackground/bg1.jpg" alt="" class="bg slideLeft" id="bg1" />
<img src="http://www.w3cplus.com/demo/css3/CSS3Fullbackground/bg2.jpg" alt="" class="bg slideBottom" id="bg2" />
<img src="http://www.w3cplus.com/demo/css3/CSS3Fullbackground/bg3.jpg" alt="" class="bg zoomIn" id="bg3" />
<img src="http://www.w3cplus.com/demo/css3/CSS3Fullbackground/bg4.jpg" alt="" class="bg zoomOut" id="bg4" />
<img src="http://www.w3cplus.com/demo/css3/CSS3Fullbackground/bg5.jpg" alt="" class="bg rotate" id="bg5" />
</body>
</html>li:nth-of-type(1) a:：after{