相对定位与绝对定位

1 相对定位

相对定位实际上是被看做普通流定位模型的一部分，因为元素的位置是相对于它在普通流中的位置的，也就是元素的位置是相对其没有设置相对定位的位置。

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>position relative</title>

    <style>
        div{
            width: 100px;
            height: 100px;
            border:1px solid #cccccc;
            display: inline-block;
        }

        .position_relative{
            position: relative;
            top: 20px;
            left: 20px;
        }
    </style>
</head>
<body>
    <div>div1</div>
    <div class="position_relative">div2</div>
    <div>div3</div>
</body>
</html>

 

2 绝对定位

 

绝对定位使元素的位置与文档刘无关，因此不占据空间。普通文档流中的其他元素的布局巨响绝对定位的元素不存在的时候一样。

绝对定位的元素的位置是相对于距离它最近的那个已定位的祖先元素确定的。如果元素没有已定位的元素，那么它的位置是相对于初始包含块的。根据用户代理的不同，初始包含块可能是html元素或者画布。

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>position absolute</title>
    <style>

      div{
            width: 100px;
            height: 100px;
            border:1px solid #cccccc;
            display: inline-block;
        }

        .position_absolute{
            position: absolute;
            top: 40px;
            left: 40px;
            background-color: gray;
        }

    </style>
</head>
<body>
    <div>div1</div>
    <div class="position_absolute">div2</div>
    <div>div3</div>
</body>
</html>

 

转载请注明出处:http://www.cnblogs.com/kerita/p/4948350.html 

posted @ 2015-11-08 21:15  Kerita  阅读(374)  评论(0)  编辑  收藏  举报