CSS 相对定位，绝对定位理解

2017-09-29 本文已影响39人不是好程序

1.相对定位

position:relative;

<html>
    <head>
        <!--参考http://web.jobbole.com/84938/-->
        <meta charset="utf-8" />
        <title></title>
        <style>
            html, body, #father-body {
                height: 100%;
                width: 100%;
                background-color: #123456;
            }
            
            .item1, .item2, .item3 {
                width: 300px;
                height: 100px;
                background-color: #234567;
                margin: 20px;
            }
            
            .item2 {
                position: relative;
                /*top:80px;*/
                                /*left:80px;*/
                /*margin: 80px 0 0 80px;*/
            }
        </style>
    </head>

    <body>
        <div class="father-body">
            <div class="item1"></div>
                <div class="item2"></div>
                <div class="item3"></div>
            </div>
        </div>
    </body>
 </html>

效果如图：

屏幕快照 2017-09-29 下午4.41.35.png

当使用margin: 80px 0 0 80px时

屏幕快照 2017-09-29 下午4.43.47.png

使用margin 这样的属性改变元素的位置会影响其他元素的位置，item3与item2上下间距不变，item3的纵坐标y增加了60

当使用top:80px; left:80px;

屏幕快照 2017-09-29 下午4.48.58.png

使用top right bottom left ，这样属性改变元素的位置的时候，不会影响其他元素的位置。
item2与item3重合了，item3的纵坐标y不变。

绝对定位

position:absolute;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body {
                margin:20px;
                height: 100%;
                width: 100%;
                background-color: #123456;
        }
        #body-div{
            padding:15px;
            width: 60%;
            background-color:#a0c8ff;
            border:1px solid #000000;
        }

        #body-div div{
            padding:10px;
            background-color:#fff0ac;
            border:1px solid #000000;
        }
    </style>
</head>
<body>
    <div id="body-div">
        <div class="item1">Box-1</div>
        <div class="item2">Box-2</div>
        <div class="item3">Box-3</div>
    </div>
</body>
</html>

屏幕快照 2017-09-29 下午5.01.08.png

为Box-2设置绝对定位属性

.item2{
      position:absolute;
}

屏幕快照 2017-09-29 下午5.02.34.png

这个时候Box-3的位置会占据之前Box-2的位置。且Box-2和Box-3的左边框会重合。且盒子的宽度会根据盒子内部的元素自适应。

当盒子设置了绝对定位但是没有使用top right bottom left设置盒子的偏移量的时候，它仍会占据原先的位置。

那么当设置top right bottom left这些属性时

设置下面的代码：

.item2{
       position:absolute;
       top:0;
       right:0;
 }

屏幕快照 2017-09-29 下午5.05.37.png

当我们把直接父级元素设置为已定位的元素

 #body-div{
            padding:15px;
            width: 60%;
            background-color:#a0c8ff;
            border:1px solid #000000;
            position: absolute;
 }

屏幕快照 2017-09-29 下午5.10.40.png

由上可以得出两个结论：
1.使用绝对定位的盒子以它的“最近”的一个“已经定位”的“祖先元素”为基准进行偏移（定位）。如果没有已经定位的祖先元素，那么就会以浏览器窗口为基准进行定位。
2.决对定位的框从标准流中脱离，这意味着它们对其后的兄弟盒子的定位没有影响。其它的盒子好像就当这个盒子（绝对定位的盒子）不存在一样。

参考链接：http://blog.csdn.net/yisuowushinian/article/details/46038423