绝对定位

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来说的。

原文地址:https://www.cnblogs.com/zhuni/p/4721418.html