css z-index 不起作用
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
注释：元素可拥有负的 z-index 属性值。
注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！
不起作用的原因第一个原因：Z-index 仅能在定位元素上奏效
<style type="text/css">
#a{width:200px;height:100px;position:relative; background-color:red;z-index:100}
#b{width:300px;height:200px;background-color:blue;position:absolute;top:10px;left:10px;z-index:1}
</style>
<div id="a">
<div id="b"></div>
</div>不起作用的第二个原因：这里的子集是相对父级的定位，在父级里面的子集可以通过z-index来表明层次，但是相对于父级，子集的层次是要低一些的。
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'/>
<style>
.out {
width:100px;
height:200px;
background:red;
-webkit-transform:scale(2);
}
#name {
position:absolute;
width:30px;
height:30px;
z-index:30;
background:yellow;
}
.in {
position:absolute;
top:20px;
left:30px;
width:100px;
height:200px;
background:blue;
z-index:10;
}
</style>
</head>
<body id="body">
<div class="out"><div id="name">
</div></div>
<div class="in"></div>
</body>
不起作用低三个原因 #name的父元素使用了 transform属性。这个原因尚不明确
- 版本：CSS3
- 继承性：无
