1.position:absolute/relative;z-index:0; 对象会移出文档流之外,同z-index情况下按先后顺序依次叠加
2.float:left;的元素设置position:absolute/relative;z-index:0;遵循absolute>float原则
3.float:left;中的元素设置position:absolute/relative;z-index:0;定位参考(offsetParent)依然是float的position
参考地址: http://taligarsiel.com/Projects/howbrowserswork1.htm
原文如下:
There are three schemes:
The positioning scheme is set by the "position" property and the "float" attribute.
代码如下:
<!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>Ebbinghaus Intelligent Remember [v1.0]</title>
<style>
div{border:1px solid green;min-height:50px}
.a{position:relative;z-index:1;top:30px}
.a .b{position:relative;z-index:0;background-color:darkkhaki;height:50px;top:176px}
.a .c{position:absolute;z-index:1;left:40px;top:219px;width:1080px;height:80px;background-color:#ccc}
.a .d{float:left;background-color:navajowhite;margin-top:30px}
.a .d .e{position:absolute;z-index:1;background-color:cadetblue}
.a .d .f{}
.a .d .f .g{}
.a .d .f .h{}
.a .i{float:left;background-color:beige;margin-top:30px}
.a .i .j{}
.a .i .k{}
</style>
</head>
<body style="">
<div class="a">000000000000
<div class="c">2222222222</div>
<div class="b">1111111111</div>
aaaaaaaaaaaa<br/>aa<br/>a<br/>a<br/>a<br/>a<br/>aaaaa
<div class="d">
<div class="e">333333333</div>
<div class="f">
<div class="g">12121212</div>
<div class="h">13131313</div>
</div>
55555555555555</div>
<div class="i">
<div class="j">6666666666</div>
<div class="k">7777777777</div>
8888888888</div>
9999999999</div>
</body>
</html>