自己自學前端不久，遇到很多問題。特別是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>
備註：把代碼複製過去，方便查閱效果。