html-定位

概述：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        /*
            position 定位
            static 静态定位（没有定位），默认
            relative 相对定位，相对于正常位置(原来没定位之前的位置)进行定位，还要占据位置
            absolute 绝对定位，没有占据位置，使元素完全脱离文档流
                     没有定位父级，则相对于整个文档发生偏移
                     参考最近非static定位的父级进行定位
            fixed    固定定位，相对于浏览器窗口进行定位
            方向词
                left
                right
                top
                bottom
            z-index 规定定位的层级（默认0）
                值：number 值越大层级越高

         */
        div{
            width: 100px;
            height: 100px;
            background: aqua;
            /*margin: 50px auto;*/
        }
        .box1{
            position: relative;
            top: 20px;
            background: aquamarine;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

绝对定位：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box1{
            width: 100px;
            height: 100px;
            background: aqua;
            position: absolute;
            top: 100px;
            left: 50px;
        }
        .box2{
            width: 200px;
            height: 200px;
            background: antiquewhite;
            margin: auto;
            position: relative;
        }
        #box{
            width: 500px;
            height: 500px;
            background: black;
            margin: 50px auto;
            position: relative;
        }
    </style>
</head>
<body>
    <div id="box">
        <div class="box2">
            <div class="box1"></div>
        </div>
    </div>
</body>
</html>