position:absolute的定位是一個相對麻煩的問題。
首先在文檔流中，定義為position:absolute的元素已經被刪除了。
那它的定位到底是相對於body，還是父級元素呢？
結論如下：
position:absolute是相對於他的包含塊中第一個有position:absolute或者position:relative屬性的父級元素，如果都沒有，就是相對於body。
舉例如下：
1、它的父級元素都沒有，就是相對於body定位的。
<!DOCTYPE html> <html> <head> <title>test</title> </head> <body> <div style="width:200px;height:200px;background-color:red;"> <div style="width:100px;height:100px;background-color:blue;"> <div style="width:50px;height:50px;background-color:yellow;position:absolute;left:20px;top:10px;"></div> </div> </div> </body> </html>
2、它的父級元素里有，就是相對於哪個有的父級元素。
例一：相對於第一個div定位
<!DOCTYPE html> <html> <head> <title>test</title> </head> <body> <div style="width:200px;height:200px;background-color:red;position:absolute;"> <div style="width:100px;height:100px;background-color:blue;"> <div style="width:50px;height:50px;background-color:yellow;position:absolute;left:20px;top:10px;"></div> </div> </div> </body> </html>
例二：相對於第二個div定位
<!DOCTYPE html> <html> <head> <title>test</title> </head> <body> <div style="width:200px;height:200px;background-color:red;position:absolute;"> <div style="width:100px;height:100px;background-color:blue;position:relative;"> <div style="width:50px;height:50px;background-color:yellow;position:absolute;left:20px;top:10px;"></div> </div> </div> </body> </html>