绝对定位与相对定位

绝对定位：绝对定位指相对于父级元素来说，

    <style type="text/css">
        #a{
            width:500px;
            height:500px;
            background-color:red;
            position:absolute;
            top:100px;
            left:100px;
            }
        #b{
            width:200px;
            height:200px;
            background-color:blue;            
            }        
    </style>
</head>
<body>
    <div id="a">块元素A
        <div id="b">块元素B</div>


    </div>
               
</body>

那么，如果是b的绝对定位，就是相对于a来说的

        #b{
            200px;
            height:200px;
            background-color:blue;
            position:absolute;
            top:50px;
            left:50px;            
            }

如果给b做绝对定位的话，效果是：

相对定位：相对定位是指相对于自身本来应该出现的位置来定位

如图：c本来的应该的位置

如果给c做相对定位的，c下次出现的位置应该相对于上图的c位置来计算

        #c{
            100px;
            height:100px;
            background-color:#F09;
            position:relative;
            bottom:50px;
            left:50px;
            }

效果如图：

固定fixed：固定指该元素相对于整个浏览器页面位置是固定的。如果把一张图片用fixed固定在页面右下角，即使拖动滚动条图片位置依然在右下角。