当absolute定位元素的祖辈元素都不是relative/absolute/fixed定位时，一直以为absolute元素是相对于视口定位的，跟fixed定位一样。但是实际情况是，absolute元素会随着文档的滚动而滚动，并不是在视口中固定不动的。那这种情况下absolute定位元素是相对于谁来定位的呢？
下面代码的效果怎么解释？（先向下滚动页面，然后点击页面使absolute元素定位。如果是相对于文档，那absolute元素应该是在文档的右下角。但实际上却不是）
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
html
{
border-right:2px solid #f00;
width:200px;
}
body
{
border-right:2px dotted #0f0;
width:100px;
}
div{
height:600px;
}
p.abPos{
position:absolute;
right:0px;
bottom:0px;
margin:0;
width:100px;
height:100px;
border:1px solid #00f;
}
</style>
</head>
<body>
html宽度设为200px,右边框为红色；body宽度为100px,右边框为绿色；目标元素p（蓝色边框），绝对定位，包含块为视口，精确说包含块为窗口未滚动时的视口。
<div>
<p width="300px" height="300px" id='target'></p>
</div>
<script>
window.addEventListener('scroll',function(){
if(document.body.scrollTop>20){
document.getElementById('target').className='abPos';
}
});
</script>
</body>
</html>
