定位（设置盒子的位置）

    .box1{
        /* 绝对位置，和父元素的相对位置,参照物是浏览器的第一屏位置 */
        background-color: red;
        position: absolute;
        top: 100px;
        left: 100px;
        /* 设置层级，两个盒子重叠部分显示层级大的盒子 */
        z-index: 1;
    }
    .box2{
        background-color: blue;
        /* 相对定位 */
        /* 距离原来位置顶端100px，左端距离100px */
        position: relative;
        top: 100px;
        left: 100px;
    }
    .box3{
        background-color: green;
        /* 固定定位，显示位置随着拉滚动条，在屏幕上的位置不变 */
        position: fixed;
        top: 100px;
        left: 100px;
    }
    .box4{
        background-color: black;
        /* 粘性定位,距离顶端还有10px时开始保持不动 */
        position: sticky;
        top: 10px;
    }
    .box5{
        background-color: aqua;
        /* 水平方向居中 */
        margin: 0 auto;
    }
    .box6{
        background-color: yellow;
        /* 垂直方向居中 随着滚动轴移动*/
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -100px;
        margin-left: -100px;
    }