position中static、relative、absolute、fixed的分析 

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
        <div>
            <p style="position:static;left:20px;top:300px;">一号模块</p>
            <p style="position:relative;left:20px;top:300px;">二号模块</p>
            <div style="position:absolute;left:300px;top:300px;width:90px;">
                <p style="position:absolute;left:20px;top:-299px;">三号模块</p>
            </div>
            <p style="position:fixed">四号模块</p>
        </div>
    </body>
</html>

static 基于页面的文本流、页面中的元素默认是static

relative 相对定位：对前文本的一个相对定位，前后元素不会占用该位置

absolute 绝对定位：基于父级定位元素的一个绝对定位，其父级元素的定位必须是absolute或者relative，如果父级没有定位，则相对于body定位

fixed 基于浏览器窗口定位

posted on 2015-07-09 21:22  张狂不年轻°  阅读(129)  评论(0)  编辑  收藏  举报