3．实例强化对定位属性的理解
（1）无定位设置，对象遵循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=gb2312" />
<title>无定位设定,对象遵循HTML定位规则</title>
<style type="text/css">
<!--
body {
margin:0px;
font-size: 9pt;
margin-top: 150px;
margin-left: 150px;
}
.box1 {
background-color: #33CCFF;
height: 200px;
width: 200px;
}
.box2 {
background-color: #66CC66;
height: 100px;
width: 100px;
}
-->
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
（2）给设定了定位属性的对象指定left，right，top，bottom属性中的至少一个，不然定位不起作用。下面实例中虽然给box2设定了定位属性position: absolute，但是如果没有指定其中一个方位定位值top: 0px，定位是不发生作用的，你可以删除我注释的样式再测试效果进行前后对比。
<!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=gb2312" />
<title>给定位对象指定一个方位数值</title>
<style type="text/css">
<!--
body {
margin:0px;
font-size: 9pt;
margin-top: 150px;
margin-left: 150px;
}
.box1 {
background-color: #33CCFF;
height: 200px;
width: 200px;
}
.box2 {
background-color: #66CC66;
height: 100px;
width: 100px;
position: absolute;
top: 0px;/*如果没有指定一个方位定位属性和值,绝对定位不起作用,你可以删除这一项看一下效果*/
}
-->
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
（3）绝对定位对象可以层叠，层叠顺序用z-index控制，如果没有指定则遵循其父对象的定位方法，就目前来说要做到不同浏览器正常浏览，最好不要给z-index指定负值，因为像FF这样标准的浏览器不支持负值，为了解释这一现象，下面实例中的最底层图片我用到了负值，所以会出现在IE中可以看到3幅图层叠，而转到FF中你就只能看到两幅图层叠了。
