a標簽似乎是被覆蓋了,但是找不到問題根源。z-index屬性修改沒有效果
CSS
.demo{ width:1000px; height:442px; overflow:hidden;margin:0px;z-index:-1; padding:0px; position:relative; }
.num { bottom: 10px; right: 50px; width:auto;height:8px;z-index:10; position:absolute;}
.num a{cursor:pointer; width:8px; height:8px; background:url(../images/bicon_bg.png) no-repeat bottom; margin-right:4px; float:left;display:inline-block; border:1px solid red;position:relative;z-index:50;}
.num a:hover {cursor:pointer; background:#ff7d01; width:8px; height:8px; display:block; color:#fff; }
.demo ul {position:relative;z-index:5;width:956px; }
.demo ul li {position:absolute; display:none; margin:0px;padding:0px;width:1000px; }
.demo ul li .demo-img{ width:1000px;height:442px;float:left; display:inline; }
.demo ul li .demo-img img{ width:1000px; height:442px;}
.demo .num a.cur{ background:url(../images/bicon_bg.png) no-repeat top; display:block;}
前端是這樣的結構
<div class="demo">
<div class="num">
<a href="#" class='cur'></a>
<a href="#" ></a>
<a href="#" ></a>
</div>
<ul>
<li style='DISPLAY: block' ><img src='imagestext/20140916064258.jpg' width="1000" height="442"></li>
<li ><img src='imagestext/20130531030129.jpg' width="1000" height="442"></li>
<li ><img src='imagestext/20140905105755.jpg' width="1000" height="442"></li>
</ul>
</div>
.demo你設置z-index為-1不就到body後面了。。當然獲取不到焦點了,去掉z-index:-1
.demo {
width: 1000px;
height: 442px;
overflow: hidden;
margin: 0px;
/* z-index: -1;*/
padding: 0px;
position: relative;
}