CSS 层级

html-css012

CSS 层级,第1张

层级 Z-index

特点：

1、有定位属性的元素谁在上面，比的是Z-index值，谁的值大，谁就在上面

2、有定位属性的元素默认层级是0，如果层级一样，则后来者居上。

3、只有 有定位属性的元素才有层级的概念

4、只有亲兄弟元素才能比较层级

例子：

比较前

比较后

比较后为什么还是y在上面吗？不是y先进行定位的吗？

其实这个跟那个元素先定位没有关系，只跟你定义元素的先后有关系，

虽然你CSS没有写定位，可是层级是默认的

把x的层级定为2之后 请看效果

最简单的就是利用CSS层级关系进行编写

比如：

<ul class="main_menu">

    <li>

        <span>主菜单</span>

    </li>

    <li>

        <span>主菜单二</span>

        <ul class="sub_menu">

            <li>三级菜单</li>

            <li>三级菜单二</li>

        </ul>

    </li>

</ul>

CSS部分可以这样写：

<style>

ul.sub_menu {display:none}   // 先让二给菜单隐藏

ul.main_menu>li:hover ul.sub_menu {display:block}  //当鼠标划过第一级主菜单的li标签时，当前子级的二级ul就显示出来。

//其它的你自己再美化，主要告诉你方式

</style>