自己自学前端不久，遇到很多问题。特别是css中的position，着实让我头疼。自己看了一些视频，一些书籍，也慢慢对position有了一定了解。
很多关于css的文章，都讲到当子元素是position时候，绝对定位以窗口可视区为参照，可是当我敲代码的时候，出现了问题。现在总结如下：
第一种情况（子元素以可视窗口为参照点）
1：static(最近祖先元素)——>static(父元素) ——>absolute(子元素)
这里写代码片
<html>
<style type="text/css">
html{祖先元素
border: 1px solid blue;
margin: 20px 0 0 30px;
position: static;
}
body{父元素
border: 1px solid red;
height: 100px;
position: static;
}
#aas{子元素
height: 20px;
width: 30px;
background: brown;
left: 0px;
bottom: 0px;
position: static;
}
</style>
</head>
<body>
<div id="aas">
</div>
</body>
</html>
第二种情况（子元素以最近祖先元素为参照点）
2：relative或absolute(最近祖先元素)——>static(父元素) ——>absolute(子元素)
这里写代码片<html>
<style type="text/css">
html{祖先元素
border: 1px solid blue;
margin: 20px 0 0 30px;
position: relative或absolute;
}
body{父元素
border: 1px solid red;
height: 400px;
position: static;
}
#aas{子元素
height: 100px;
width: 100px;
background: brown;
left: 0px;
bottom: 0px;
position: absolute;
}
</style>
</head>
<body>
<div id="aas">
</div>
</body>
第三种情况（子元素以最近父元素为参照点）
2：**非**static或absolute或relative(最近祖先元素)——>非static(父元素) ——>absolute(子元素)
这里写代码片<html>
<style type="text/css">
html{祖先元素
border: 1px solid blue;
margin: 20px 0 0 30px;
position: relative或relative或static;
}
body{父元素
border: 1px solid red;
height: 400px;
position: relative或absolute;
}
#aas{子元素
height: 100px;
width: 100px;
background: brown;
left: 0px;
bottom: 0px;
position: absolute;
}
</style>
</head>
<body>
<div id="aas">
</div>
</body>
备注：把代码复制过去，方便查阅效果。