1.absolute元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
2.绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块。
3.absolute定位的margin定位其实是不冲突的,他们可以同时作用,不管有没有设置定位值,他都是会对margin值敏感的。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> #div1 { width: 300px; height: 300px; background: red;
margin-left: 20px;
} #div2 { width: 100px; height: 100px; background: yellow; position: absolute; left: 25px; margin: 50px 0 0 50px; } </style> </head> <body> <div id="div1"> <div id="div2"></div> </div> </body> </html>
通过在firebug中查看,他们那两个定位置是加在一起的,之前没有设置left值时,就只有margin值。第二次我加上了left值之后,他就又往右移了25px。同时该实例也说明了absolute是相对于有定位的父元素,在这里div1是没有定位的,他是相对于body来说的。