关于ｄｉｖ的定位问题讨论
以下是ＣＳＳ２．０手册中对于定位问题的解释：
检索对象的定位方式。
设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。
假如其他具有不同 z-index 属性的对象已经占据了给定的位置，他们之间不会相互影响，而会在同一位置层叠。
此时对象不具有外补丁( margin )，但仍有内补丁( padding )和边框( border )。
要激活对象的绝对(absolute)定位，必须指定 left ， right ， top ， bottom 属性中的至少一个，并且设置此属性值为 absolute 。
否则上述属性会使用他们的默认值 auto ，这将导致对象遵从正常的HTML布局规则，在前一个对象之后立即被呈递。
设置此属性值为 relative 会保持对象在正常的HTML流中，但是它的位置可以根据它的前一个对象进行偏移。
在相对(relative)定位对象之后的文本或对象占有他们自己的空间而不会覆盖被定位对象的自然空间。
与此不同的，在绝对(absolute)定位对象之后的文本或对象在被定位对象被拖离正常文档流之前会占有它的自然空间。
放置绝对(absolute)定位对象在可视区域之外会导致滚动条出现。而放置相对(relative)定位对象在可视区域之外，滚动条不会出 现。
内容的尺寸会根据布局确定对象的尺寸。
例如，设置一个 div 对象的 height 和 position 属性，则 div 对象的内容将决定它的宽度( width )。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 position 。
但是，如下的代码所示，
在relative布局的ｄｉｖ中再次放入relative布局的ｄｉｖ之后，
ｉｄ号为"test4"的ｄｉｖ的布局完全没有按照上面所说的方式进行分布。
调整一下浏览器窗口的大小页面，发现该ｄｉｖ的消失了，在页面上看不见了。刷新页面才又再次出现．
尝试在"ｔｅｓｔ１"的ｃｓｓ样式中加入宽度的属性，宽度任意，之后，发现"test4"的位置变为正常，才与手册中的解释一致．
-->
<code>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<style>
<!--
div.test1 {
background: gray;
border: thin;
border-style: solid;
margin: 3px;
}
div.test2 {
background: blue;
border: thin;
border-style: solid;
margin: 3px;
height: 300px;
width: 500px;
}
div.test3 {
background: purple;
border: thin;
border-style: solid;
margin: 3px;
float: left;
}
div.test4 {
background: yellow;
border: thin;
border-style: solid;
margin: 3px;
float: left;
}
form {
background: green;
border: thin;
border-style: solid;
margin: 3px;
height: 500px;
}
-->
</style>
</head>
<body onmousemove="window.status = 'X=' + window.event.x + ' Y=' + window.event.y">
<div class="test1" style="position: relative; top: 0px; left: 0px;">test1
<form action="">form
<div class="test2">test2
<div class="test3">test3</div>
<div class="test4" style="position: relative; left: 0px;">test4</div>
</div>
</form>
</div>
</body>
</html>
检索对象的定位方式。
设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。
假如其他具有不同 z-index 属性的对象已经占据了给定的位置，他们之间不会相互影响，而会在同一位置层叠。
此时对象不具有外补丁( margin )，但仍有内补丁( padding )和边框( border )。
要激活对象的绝对(absolute)定位，必须指定 left ， right ， top ， bottom 属性中的至少一个，并且设置此属性值为 absolute 。
否则上述属性会使用他们的默认值 auto ，这将导致对象遵从正常的HTML布局规则，在前一个对象之后立即被呈递。
设置此属性值为 relative 会保持对象在正常的HTML流中，但是它的位置可以根据它的前一个对象进行偏移。
在相对(relative)定位对象之后的文本或对象占有他们自己的空间而不会覆盖被定位对象的自然空间。
与此不同的，在绝对(absolute)定位对象之后的文本或对象在被定位对象被拖离正常文档流之前会占有它的自然空间。
放置绝对(absolute)定位对象在可视区域之外会导致滚动条出现。而放置相对(relative)定位对象在可视区域之外，滚动条不会出 现。
内容的尺寸会根据布局确定对象的尺寸。
例如，设置一个 div 对象的 height 和 position 属性，则 div 对象的内容将决定它的宽度( width )。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 position 。
但是，如下的代码所示，
在relative布局的ｄｉｖ中再次放入relative布局的ｄｉｖ之后，
ｉｄ号为"test4"的ｄｉｖ的布局完全没有按照上面所说的方式进行分布。
调整一下浏览器窗口的大小页面，发现该ｄｉｖ的消失了，在页面上看不见了。刷新页面才又再次出现．
尝试在"ｔｅｓｔ１"的ｃｓｓ样式中加入宽度的属性，宽度任意，之后，发现"test4"的位置变为正常，才与手册中的解释一致．
-->
<code>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<style>
<!--
div.test1 {
background: gray;
border: thin;
border-style: solid;
margin: 3px;
}
div.test2 {
background: blue;
border: thin;
border-style: solid;
margin: 3px;
height: 300px;
width: 500px;
}
div.test3 {
background: purple;
border: thin;
border-style: solid;
margin: 3px;
float: left;
}
div.test4 {
background: yellow;
border: thin;
border-style: solid;
margin: 3px;
float: left;
}
form {
background: green;
border: thin;
border-style: solid;
margin: 3px;
height: 500px;
}
-->
</style>
</head>
<body onmousemove="window.status = 'X=' + window.event.x + ' Y=' + window.event.y">
<div class="test1" style="position: relative; top: 0px; left: 0px;">test1
<form action="">form
<div class="test2">test2
<div class="test3">test3</div>
<div class="test4" style="position: relative; left: 0px;">test4</div>
</div>
</form>
</div>
</body>
</html>