如何让某一DIV层显示在上面？z-index解决问题 _CSS

在网页设计时，有时遇到某个DIV内容被其他层覆盖挡住了，怎么办呢？我们如何让某一DIV层显示在上面？其实，使用css属性 z-index 就能解决问题。

设置z-index让div层wrap2在上面

html代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>z-index 设置层上下位置</title>
<style>
.wrap1, .wrap2, .wrap3{width:200px; height:200px;}
.wrap1{
background:#fcc;
position:absolute;
top:80px;
left:200px;
z-index:300; /* 设置层上下位置 */
}
.wrap2{
background:#cfc;
position:absolute;
top:50px;
left:150px;
z-index:500; /* 设置层上下位置 */
}
.wrap3{
background:#ccc;
position:absolute;
top:20px;
left:100px;
z-index:100; /* 设置层上下位置 */
}
</style>
</head>

<body>
<div class="wrap1">
这里是wrap1
</div>
<div class="wrap2">
这里是wrap2
</div>
<div class="wrap3">
这里是wrap3
</div>
</body>
</html>

execcodegetcode

代码分析：

1、设置三层上下位置的属性是 z-index，数值小的在下面，数值大的在上面。

2、css属性 z-index 兼容所有浏览器，不用担心在IE8浏览器上不起作用。

注意问题：

在IE浏览器上，即使设置 z-index 也不能让div位于下拉菜单控件 select 的上面，同样也不能位于flash的上面，但是在Firefox、Chrome、360等主流浏览器上是没有问题的。

如何用Javascript设置div的z-index？

JavaScript 语法是：

object.style.zIndex="1"

假如div的id是 div1 ，则Javascript就可以这样写：

document.getElementById("div1").style.zIndex="1";

注意 zIndex 的大小写要正确。

搜索

热门标签:

如何让某一DIV层显示在上面？z-index解决问题

如何用Javascript设置div的z-index？