CSS 定位偏移量

演示代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="reset.css"/>
        <style type="text/css">
            .box{width: 302px;height: 302px;border: 1px solid #000000;margin: 50px auto;}
            .pst1,.pst2,.pst3{width: 100px;height: 100px;}
            .pst1{background-color: #ff0000;}
            .pst2{
                background-color: #00ff00;
                position: absolute;
                left: 50px;
                top: 30px;
            }
            .pst3{background-color: #0000ff;}
        </style>
    </head>
    <body>
        <!-- 
        定位：规定元素的位置。用于没有规律元素的布局。
        定位三种类型：相对定位、绝对定位、固定定位
        定位使用方法：
            1，规定哪一种定位方法
            2，指定在方向上的偏移量（top、bottom、left、right）
            3，注意，top和bottom同时设置只有一个方向生效，left和right也一样；left和top优先
            4，相对定位是相对于相对于原来的位置定位
         -->
        <!-- 
        相对定位：
            1，position: relative;
            2，指定相对定位后，就成了定位元素，脱离文档流，但没有完全脱离
            3，相对定位元素脱离文档流，但原来占据的空间会保留
            4，相对定位是相对于相对于原来的位置定位
         -->
         <!-- 
         绝对定位：
            1，position: absolute;
            2，指定绝对定位后，就成了定位元素，完全脱离文档流
            3，绝对定位元素完全脱离文档流，原来占据的空间不保留
            4，绝对定位是相对于最近有定位属性的父元素进行定位，如果网上没找到有定位元素的父元素，才会相对于body元素进行定位
         -->
        <!-- 
        定位偏移量：
            1，可以使用px、em、rem、%等单位，
            2，可以使用负值，元素的偏移方向与正值相反
            注意：使用%百分比单位，相对于哪个元素定位，就是哪个元素宽度或高度的百分比
         -->
        <div class="box">
            <!-- div.pst$*3 -->
            <div class="pst1"></div>
            <div class="pst2"></div>
            <div class="pst3"></div>
        </div>
    </body>
</html>

CSS 定位偏移量