HTML元素层级与Z-index-优快云博客

本文链接：https://blog.youkuaiyun.com/its_noah/article/details/82668030

(判断题) input属于窗体元素，显示比flash和其他任何元素都高（❌）

解析：

(1)优先级低的会被覆盖

(2)有表单的高于无表单的，有窗口的高于无窗口的

(3)如何人为改变实际文档中HTML元素的显示呢？

通过z-index，数值越大优先级越高。但是z-index只能在同一类型的元素中起到作用，类似于PS中的图层，不在同一个图层上。

在网上看到的例子：当无窗口元素覆盖了有窗口元素，即显示的区域有重叠，那么可以通过自定义函数隐藏其中一个显示另外一个元素。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <style type="text/css">
        .menuBlock{
            position:relative;top:14px;width:165px;border:2px solid black;
            }
        #subMenus{
            position:relative;left:15px;top:15px;width:171px;
            padding-left:2px;padding-right:2px;border:2px solid black;
            z-index:100;visibility:hidden;
        }
        #lb_1{
            position:absolute;left:10px;top:40px; 
            }
        </style>
        
        <script type="text/javascript">
        var isActive = false;
        
        function showMenu(){
            isActive = true;
            document.getElementById("lb_1").style.visibility="hidden";
            document.getElementById("subMenus").style.visibility="visible";
        }
        
        function hideMenu(){
            isActive = false;
            setTimeout('hide()',100);
        }
        
        function hide(){
            if(!isActive){
            document.getElementById("subMenus").style.visibility = "hidden";
            document.getElementById("lb_1").style.visibility="visible";
            }
        }
        function setStyle(menuItem){
            isActive = true;
            menuItem.style.backgroundColor = "Gray";
            menuItem.style.color = "#FFFFFF";
        }
        
        function setDefault(menuItem){
            isActive = false;
            menuItem.style.backgroundColor = "";
            menuItem.style.color = "";
            hideMenu();
        }
        </script>
    </head>
    <body>
        
        <div id="main" style="position:absolute;width:200px;">
            <div id="menuBlock" class="menuBlock" onmouseover="showMenu()" onmouseout="hideMenu()">
                CSS菜单
            </div>
            <div id="subMenus" >
                <div id="0" onmouseover="setStyle(this)" onmouseout="setDefault(this)" >
                    菜单项目一
                </div>
                <div id="1" onmouseover="setStyle(this)" onmouseout="setDefault(this)" >
                    菜单项目二
                </div>
                <div id="2" onmouseover="setStyle(this)" onmouseout="setDefault(this)" >
                    菜单项目三
                </div>
                <div id="3" onmouseover="setStyle(this)" onmouseout="setDefault(this)" >
                    菜单项目四
                </div>
                <!--共四个菜单项目 -->
            </div>
            
            <select id="lb_1" name="lb_1">
                <option value="-1">选择列表</option>
                　<!-- 三个选项 -->
                <option value="-1">select1</option>
                <option value="-1">select2</option>
                <option value="-1">select3</option>
            </select>
        </div>
    </body>
</html>

CSS 元素显示优先级