不論是标準盒子還是IE盒子都這樣
-
如果子元素設定了絕對定位且沒有設定left,top,right,bottom等
不管父元素有沒有定位，子元素都會相對于父元素的内邊框進行定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> .father { width: 220px; height: 200px; border: 10px solid red; } .son { position: absolute; background-color: aqua; width: 100px; height: 300px; } </style> <body> <div class="father"> <div class="son">son</div> </div> </body> </html>
2. 如果子元素設定絕對定位并且設定了left,right,bottom,top等
如果父元素有定位，就相對于父元素的内邊框進行定位
如果所有祖先元素都沒有定位那麼就相對于螢幕左上角進行定位（這裡設定top為0，沒有設定left,是以left還是在父元素内邊框）