总是在纠结一个问题,当然我是前端初学者。这个问题就是,一个元素放在另一个元素里面,总希望它显示时,但是别撑开元素。这个时候一定要想到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配合就不会撑开页面了。