核心提示：几年前学习了css。。。一头雾水，从没弄懂过，也就不想弄了。最近是无聊，还是要学下的，去看了别人的博客，自己搞搞，以下内容都是自己推想的，或者有错误，敬请纠正。先来看没加任何position的代码!D...
几年前学习了css。。。一头雾水，从没弄懂过，也就不想弄了。最近是无聊，还是要学下的，去看了别人的博客，自己搞搞，以下内容都是自己推想的，或者有错误，敬请纠正。
先来看没加任何position的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#a{
margin: 0 auto;
height: 500px;
width: 500px;
background: #aeeee2;
z-index: -1;
}
#b{
height: 400px;
width: 300px;
background: purple;
}
#c{
height: 200px;
width: 200px;
background: blue;
}
#d{
height: 100px;
width: 100px;
background: black;
}
</style>
</head>
<body>
<p id="a">
<p id="b">
<p id="c">
<p id="d"></p>
</p>
</p>
</p>
</body>
</html>
1.结果如图，这里很容易理解
2.然后是添加给#b紫色 添加 position: relative;和left:100px;，结果是
这里加了position:relative和left：100px;的紫色是相对了之前自己的位置改变了位置，left和margin-left类似吧。
3.再把蓝色加上position:relative;和top:100px;，如图结果也是可想而知，说明了position:relative; 是相对于之前自己的位置（在没加position的父元素里面）而言（其他情况欠考虑）。
4.这里把黑色position设为absolute，同时加上right:0（贴在右边）; 看到结果是这样
知道了黑色位置是相对蓝色（父元素）而言的，这里注意蓝色的position是relative。
5.当我们把蓝色的position设为static（默认，即删除掉position属性）时，结果是黑色贴在紫色右边，而蓝色是去掉position的位置
为什么？因为absolute是相对于非static的其他position值而言的。黑色的祖先中有relative，则相对于这个祖先（紫色）而言。
6.当我们把紫色的relative改为static会出现什么情况？
竟然跑出了a,b,c（此时a，b，c的p都是默认static的position（即删除position属性）），跑到了body。那只能说body是界限了喔。。。
