javascript 动态改变层的Z-INDEX的代码style.zIndex

最新推荐文章于 2023-09-23 21:21:19 发布

cb2233

最新推荐文章于 2023-09-23 21:21:19 发布

阅读量2.8k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript div layer function html

本文链接：https://blog.youkuaiyun.com/cb2233/article/details/2509692

本文通过一个简单的HTML页面示例展示了如何使用JavaScript控制不同层叠元素的显示顺序。通过修改元素的z-index属性，可以实现多个层叠div之间的层级调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

</head>
<body>
    <div style="width: 300px; position: absolute; left: 20px; top: 300px; height: 500px;">
        <div style="position: absolute; width: 100px; height: 200px; background-color: Red;"
            onclick="show(this)">
        </div>
        <div style="position: absolute; width: 300px; height: 100px; background-color: black;"
            onclick="show(this)">
        </div>
        <div id="Layer1" onclick="show(this)" style="position: absolute; left: 86px; top: 36px;
            width: 376px; height: 295px; background-color: #CCCCCC;">
        </div>
        <div id="Layer2" onclick="show(this)" style="position: absolute; left: 194px; width: 407px;
            height: 315px; background-color: #0066FF;">
        </div>
    </div>
</body>
</html>