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

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

转载最新推荐文章于 2023-09-23 21:21:19 发布 · 2.7k 阅读

文章标签：

#javascript #layer #div #function #image #html

Javascript 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了使用HTML、CSS和JavaScript实现网页布局和交互效果的方法，包括层叠样式表（CSS）选择器、定位属性、事件监听器以及通过改变元素的Z-index值来调整元素堆叠顺序的技术。

代码示例一、

</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>

代码示例二、

<div id="Layer1" style="position:absolute;
    left:186px;
    top:96px;
    width:376px;
    height:295px;
    background-color: #CCCCCC;"></div>
<div id="Layer2" style="position:absolute;
    left:294px;
    top:34px;
    width:407px;
    height:315px;
    background-color: #0066FF;"></div>
<a href="#" onClick="changes('Layer1')">链接1</a> <a href="#" onClick="changes('Layer2')">链接2</a>
<script type="text/javascript">
var es = 1; //初始化点击层的z-Index
function changes(ts){
    var obj = document.getElementById(ts);
    obj.style.zIndex = es;
    es++ ; //显示后z-Index加1
}
</script>

代码示例三、来源：http://www.w3schools.com/Css/tryit.asp?filename=trycss_zindex

<html>
<head>
<style type="text/css">
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
</style>
</head>

<body>
<h1>This is a heading</h1>
<img src="w3css.gif" width="100" height="140" />
<p>Because the image has a z-index of -1, it will be placed behind the text.</p>
</body>
</html>

因为图片的z-index值设置为-1，所以图片显示在文字的后面，设置为大于或等于0的值，文本就被覆盖看不到了。