• 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配合就不会撑开页面了。

  • 相关阅读:
    测试
    python制作
    Mysql 用法
    Day006 Java面向对象编程
    Day005 Java数组详解
    Day004 Java方法详解
    Day003 Java流程控制
    Day002 Java基础语法
    Day001 MrakDown语法 Dos命令
    4. 谈谈你对ArrayList和LinkedList 的理解
  • 原文地址:https://www.cnblogs.com/wanliyuan/p/3423508.html
Copyright © 2020-2023  润新知