z-index的妙用

时间:2023-03-09 08:29:07

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

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

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

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

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

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

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