猿问

为什么我设置的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_小柯_1
浏览 3484回答 2
2回答

LeingK

用z-index要注意很多问题,一般熟悉的元素可以先去w3school看下用法,请注意最后一点然后在这个基础上再加一点,父元素的z-index值会影响子元素

幕布斯6393831

加上定位,z-index值写大
随时随地看视频慕课网APP
我要回答