实践 ：
注：firefox
示例1：
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>有趣的z-index</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css">
div {
width:300px;
height:300px;
position:relative;
}
#d1 {
background:yellow;
}
#d2 {
background:red;
top:-310px;
}
#d1 p{
position:relative;
z-index:2;
}
</style>
</head>
<body>
<div id="d1">
<p>元素1</p>
</div>
<div id="d2">
<p>元素2</p>
</div>
</body>
</html>
效果：
示例2：
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>有趣的z-index</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css">
div {
width:300px;
height:300px;
position:relative;
}
#d1 {
background:yellow;
}
#d2 {
background:red;
top:-310px;
}
#d1 p{
position:relative;
z-index:2;
}
/*就在这有点东西！*/
#d1 {
z-index:0;
}
</style>
</head>
<body>
<div id="d1">
<p>元素1</p>
</div>
<div id="d2">
<p>元素2</p>
</div>
</body>
</html>
效果：
理论：
不懂得话引点权威指南的东西看看：
一旦为一个元素指定了 z-index 值（不是 auto），该元素就会建立自己的局部叠放上下文，这意味着，元素的所有后代相对于该祖先元素都有其自己的叠放顺序。这非常类似于元素建立新包含快的方式。
z-index 默认值 auto 说明：当前叠放上下文中生成框的栈层次与其父框的层次相同。这个框不会建立新的局部叠放上下文，因此如果元素设置为：z-index:auto; 可以将其处理为 z-index:0;
113
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
