z-index问题

palgerrard 2010-08-22 11:44:25



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

   <title>ePub</title>

   <style type="text/css">

        li{

             width:100px;

             height:100px;

             float:left;

             list-style:none;

             margin:10px;

             border:10px solid blue;



        }

        li div{



           border:1px solid black;

           background:red;

           width:200px;

           height:300px;

        }

      

   </style>

</head>



<body>

   <div>

      <ul>

           <li style="z-index:20"><div style="z-index:30"> div 1 </div></li>

           <li style="z-index:10"><div></div></li>

           <li style="z-index:10"><div></div></li>

           <li style="z-index:10"><div></div></li>

           <li style="z-index:10"><div></div></li>

      </ul> 

   </div>

</body>

</html>

我想让第一个li里的div不被后面的li遮住，设置z-index没用啊。难道不能实现？？？

...全文

112 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

arenasonline 2010-08-22

打赏
举报

z-index属性的值要为整数，当块被设置了position属性时，该值才可设置各块之间的重叠高低关系。默认值为0

palgerrard 2010-08-22

打赏
举报

li{
width:100px;
height:100px;
float:left;
list-style:none;
margin:10px;
border:10px solid blue;
position:relative;

}
嘿嘿，有作用了，加上了position:relative; ,z-index就有效了~

dalmeeme 2010-08-22

打赏
举报

z-index好像只能用于绝对定位吧。

iLove9ouHenry 2010-08-22

打赏
举报

jf.

kaifadi 2010-08-22

打赏
举报

路过，mark!

palgerrard 2010-08-22

打赏
举报

补充一点，ul的样式上加上overflow:hidden;

palgerrard 2010-08-22

打赏
举报

最新的代码是这样



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

   <title>ePub</title>

   <style type="text/css">

        li{

             width:100px;

             height:100px;

             float:left;

             list-style:none;

             margin:10px;

             border:10px solid blue;

             position:relative;



        }

        li div{



           border:1px solid black;

           background:red;

           width:200px;

           height:300px;

        }

       ul{

           float:left;

           background:green;

           z-index:-1;

margin:0px;

padding:0px;

       }

   </style>

</head>



<body>

   <div>

      <ul>

           <li style="z-index:20"><div style="z-index:30"> div 1 </div></li>

           <li style="z-index:10"><div></div></li>

           <li style="z-index:10"><div></div></li>

           <li style="z-index:10"><div></div></li>

           <li style="z-index:10"><div></div></li>

      </ul> 

   </div>

</body>

</html>