CSS--定位

    <!-- 定位：使盒子自由地在盒子内移动/固定在某个位置，并压缩其他盒子 -->
    <!-- 定位=定位模式+边偏移 -->
    <!-- 定位模式：position:static静态/relative相对/absolute绝对/fixed固定 -->
    <!-- 边偏移：top/bottom/left/right：xxpx top向下走left向右走 -->
    <!-- static静态定位：默认，即无定位，盒子按标准流摆放 -->
    <!-- relative相对定位：和浮动不同，位置依然保留 -->
    <!-- absolute绝对定位：(子绝父相)若无父元素或父元素无定位则以浏览器为准定位；若需要约束，可以给父元素加定位，以最近一级带定位的父元素为准；和浮动相同不再占有原来的位置 -->
    <!-- fixed固定定位：固定在可视窗口某个位置，和浮动相同不再占有原来位置 -->
    <!-- sticky粘性定位：效果为拉动后固定在一个位置；以浏览器可视窗口为参照；占有原来位置；必须添加边偏移其中一个值 -->
    <!-- 浮动元素不会压住标准流的文字，但是绝对/固定定位会 -->
    <!-- 边偏移同时有左右会执行左，同时有上下会执行上 -->
    <style>
        .fa {
            position: relative;
            background-color: yellow;
            height: 100px;
        }
        
        .son1 {
            background-color: pink;
            height: 50px;
        }
        
        .son2 {
            position: absolute;
            top: 60px;
            background-color: green;
            width: 30px;
            height: 20px;
        }
        /* 使盒子固定到版心（固定定位） */
        
        .fix {
            position: fixed;
            left: 50%;
            margin-left: -10px;
            width: 20px;
            height: 20px;
            background-color: blue;
        }
        /* 使绝对定位的盒子水平居中 */
        /* 若是相对定位的盒子可以直接margin:0 auto */
        /* 对于绝对定位和相对定位（和浮动类似）：
                1 行内元素可以直接设置宽高
                2 块元素默认大小为内容大小
                3 不会触发外边距合并 */
        
        .absolute {
            position: absolute;
            left: 50%;
            width: 50px;
            height: 50px;
            margin-left: -25px;
            background-color: skyblue;
        }
    </style>