实践 :
注: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;