为什么我设置的z-index不可以让span这个标签在li上面呢？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
#con {
width: 730px;
height: 320px;
background: green;
z-index: -1;
}
#con span{
display: block;
width: 20px;
height: 20px;
background: white;
margin-left: 20px;
float: left;
margin-top: 250px;
border-radius: 100%;
z-index: 100;
}
#con .num_one{
margin-left: 100px;
}
#con ul{
list-style: none;
position: relative;
z-index: 1;
}
#con ul li{
display:inline-block;
width: 728px;
height: 310px;
float: left;
position: absolute;
top:2px;
left: 2px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById('con');
var aSpan=oDiv.getElementsByTagName('span');
aSpan[0].onclick=function(){
alert('dfd');
};
};
</script>
</head>
<body>
<div id="con">
<ul>
<li><img src="../img/1.jpg"/></li>
<li><img src="../img/2.jpg"/></li>
<li><img src="../img/3.jpg"/></li>
<li><img src="../img/4.jpg"/></li>
<li><img src="../img/5.jpg"/></li>
<li><img src="../img/6.jpg"/></li>
</ul>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</body>
</html>
qq_小柯_12回答
-
LeingK
用z-index要注意很多问题，一般熟悉的元素可以先去w3school看下用法,请注意最后一点然后在这个基础上再加一点，父元素的z-index值会影响子元素 -
幕布斯6393831
加上定位，z-index值写大
随时随地看视频慕课网APP
Html/CSS