定位布局 (relative)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位2.html</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    .all{
        width: 2000px;
        height: 5000px;
    }
    .div1{
        width: 200px;
        height: 200px;
        border: 1px solid red;
        background-color: red;
        /* relative（相对定位）:基于自身定位 */
        position: relative;
        left: 50px;
        top: 50px;
        /*
            relative定位：
                1.不脱离文档流。
                2.不改变自己标签属性。
                3.基于自身定位。
                4.可以用来微调。
                5.如果不写定位值，和没设置定位效果一样。
                6.一般给绝对定位做父级使用。
        */
    }
    .div2{
        width: 200px;
        height: 200px;
        border: 1px solid green;
        background-color: green;
    }
        

    </style>
</head>
<body>

    <div class="all">
        
    <div class="div1"></div>
    <div class="div2"></div>

    </div>
    
</body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容