定位的使用

最新推荐文章于 2024-06-12 12:52:53 发布

hhhhboom

最新推荐文章于 2024-06-12 12:52:53 发布

阅读量38

点赞数

文章标签： css Powered by 金山文档

本文链接：https://blog.csdn.net/hhhhboom/article/details/129469458

版权

静态定位

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>静态定位</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        div {
            width: 300px;
            height: 300px;
        }

        .red {
            background-color: red;
        }

        .blue {
            /* 定位方式 */
            /* 静态定位 */
            position: static;
            /* 偏移值 */
            left: 10px;
            top: 10px;
            background-color: blue;
        }

        /* 
        特点
        静态定位就是之前的标准流,不能通过方位属性来移动位置
        */
    </style>
</head>

<body>
    <div class="red"></div>
    <div class="blue"></div>
</body>

</html>

相对定位

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相对定位</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        div {
            width: 300px;
            height: 300px;
        }

        .red {
            background-color: red;
        }

        .green {
            /* 相对定位 */
            position: relative;
            left: 20px;
            top: 40px;
            background-color: green;
        }

        .blue {
            background-color: blue;
        }

        /*  
            特点
            1 需要配合方位属性来移动位置
            2 相对于自己原来的位置进行移动
            3 没有脱标
        */
    </style>
</head>

<body>
    <div class="red"></div>
    <div class="green"></div>
    <div class="blue"></div>
</body>

</html>

绝对定位

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        div {
            width: 300px;
            height: 300px;
        }

        .red {
            background-color: red;
        }

        .green {
            /* 绝对定位 */
            position: absolute;
            left: 150px;
            top: 150px;
            background-color: green;
        }

        .blue {
            background-color: blue;
        }

        /*  
            特点
            1 需要配合方位属性实现移动
            2 默认相对于浏览器的可视区域进行移动位置
            3 不占位置 脱标
        */
    </style>
</head>

<body>
    <div class="red"></div>
    <div class="green"></div>
    <div class="blue"></div>
</body>

</html>