问答详情
源自:2-3 鼠标浮动效果

代码中的定位以及z-index

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            body{
                padding: 0;
                font-size: 10pt;
            }
            .topmenu{
                display: block;
                width: 220px;
                border: 2px solid #e4393c;
                margin: 0;
                padding: 0;
            }
            .toptitle{
                height: 40px;
                line-height: 40px;
                text-align: left;
                font-size: 11pt;
                font-weight: bold;
                color: white;
                background: #E4393C;
                padding-left: 10px;
            }
            .topmenu li{
                height: 30px;
                line-height: 30px;
                font-size: 11pt;
                list-style: none;
                text-align: left;
                padding-left: 8px;
                z-index: 3;  /*促使二级菜单与一级菜单有个层级的关系*/
                background: url(images/1.png) no-repeat right #f8f8f8;
                /*background: color image repeat background-position/background-size;  复合写法*/
            }
            .topmenu li:hover{
                background: none;
                border: 1px solid #ddd;
                border-right: 0;
                box-shadow: 0 0 8px #DDDDDD;
                -moz-box-shadow: 0 0 8px #DDDDDD;
                -webkit-box-shadow: 0 0 8px #DDDDDD;
            }
            .topmenu li a{
                text-decoration: none;
                color: #313131;
            }
            .topmenu li a:hover{
                text-decoration: underline;
                color: #e4393c;
                font-weight: bold;
            }
            .submenu{
                display: block;
                width: 715px;
                left: 220px;
                position: absolute;
                top: 40px;
                border: 1px solid #DDDDDD;
                z-index: 4;
                background: #FFFFFF;
                box-shadow: 0 0 8px #DDDDDD;
                -moz-box-shadow: 0 0 8px #DDDDDD;
                -webkit-box-shadow: 0 0 8px #DDDDDD;
            }
            .left{
                background: gray;
                float: left;
                width: 490px;
                margin: 5px;
            }
            .right{
                background: blue;
                float: left;
                width: 200px;
                margin: 5px;
            }
        </style>
    </head>
    <body>
        <ul class="topmenu">
            <div class="toptitle">全部商品分类</div>
            <li>
                <a href="#">图书、音响、数字商品</a>
                <div class="submenu">
                    <div class="left">
                        左侧二级分类<br />
                        左侧二级分类<br />
                        左侧二级分类<br />
                        左侧二级分类<br />
                        左侧二级分类<br />
                    </div>
                    <div class="right">
                        右侧推荐品牌
                    </div>
                </div>
            </li>
            <li><a href="#">家用电器</a></li>
            <li><a href="#">手机、数码</a></li>
            <li><a href="#">电脑、办公</a></li>
            <li><a href="#">家具、家居、家装、厨具</a></li>
            <li><a href="#">服饰内衣、珠宝首饰</a></li>
            <li><a href="#">个护化妆</a></li>
            <li><a href="#">鞋靴、箱包、钟表、奢侈品</a></li>
            <li><a href="#">运动会外</a></li>
            <li><a href="#">汽车用品</a></li>
            <li><a href="#">母婴、玩具乐器</a></li>
            <li><a href="#">食品饮料、酒类、生鲜</a></li>
            <li><a href="#">营养保健</a></li>
            <li><a href="#">彩票、旅行、充值、票务</a></li>
        </ul>
    </body>
</html>


代码中,.topmenu li中有个z-index:3;这个属性有用吗?不是说z-index只对定位元素管用吗?其次在.submenu中又来了一个z-index:4;还有一个绝对定位,那么其中top  left的值是相对谁来进行定位的,li还是body?

提问者:街角疯 2017-06-21 16:41

个回答

  • 林逸舟丶
    2017-06-24 23:19:26
    已采纳

    z-index决定了浮动元素的上下位置,高者显示在低者之上。

    绝对定位的top和left都是相对于有着“position: relative”的祖辈元素,注意,是祖辈,不一定是父辈,可以是爷爷辈,哈哈。就是往祖辈元素推移,谁有relative属性,绝对定位就相对于它来进行top和left的偏移。