z-index的妙用

总是在纠结一个问题，当然我是前端初学者。这个问题就是，一个元素放在另一个元素里面，总希望它显示时，但是别撑开元素。这个时候一定要想到z-index。

例如今天写的一个浮动在导航栏下面的一个图片，我用的是sub标签来装这个背景小图标，但是毫无疑问，

当你把sub放在li里面的a标签后面，如下

<li id="channel_2" class="channel"><a href="http://www.bluecomgroup.com/">Homepage</a><sub>111</sub></li>
<li id="channel_3" class="channel"><a href="http://www.bluecomgroup.com/best-seller">Best seller</a><sub>111</sub></li>
<li id="channel_4" class="channel"><a href="http://www.bluecomgroup.com/special-sales">Special Sales</a><sub>111</sub></li>
<li id="channel_5" class="channel"><a href="http://www.bluecomgroup.com/help-center">Help center</a><sub>111</sub></li>

在ie7、ie8、以及火狐，你都不会看到撑开的效果，但是在万恶的ie6下一定，所以你要设置sub的css如下：

 sub {
        display:none;
        position:absolute;
        left:45px;
        top:40px;
        z-index:-1;
        background:url(images/active.gif) no-repeat;
    }

这样用z-index和position:absolute、left、top配合就不会撑开页面了。