css定位（position）

最新推荐文章于 2022-10-17 01:02:28 发布

「已注销」

最新推荐文章于 2022-10-17 01:02:28 发布

阅读量290

点赞数

分类专栏：前端基础入门 css/css3 文章标签： css

本文链接：https://blog.csdn.net/Allisa_yan/article/details/88748638

版权

前端基础入门同时被 2 个专栏收录

22 篇文章 1 订阅

订阅专栏

css/css3

15 篇文章 0 订阅

订阅专栏

css体系中，position不仅仅是一个属性，还是一个模块（简单了解）；

* position:static; *

// 默认值

概念：

自然流 / 常规流是什么？ --- 最原始的元素的展示方式

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

<head>
    <meta charset="UTF-8">
    <title>change-to-flex</title>
    <style>
    .block {
        position: static;

        top: 10px;

        width: 50px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        border: 2px solid blue;
        box-sizing: border-box;
    }

    .block:nth-child(1) {
        border: 2px solid green;
        margin-left: auto;
        margin-right: auto;
        /*margin: 30px;*/
    }

    .block:nth-child(2) {
        /*position: static;*/
        /*border-color: red;*/
        /*margin: 20px;*/
        border: 2px solid red;
    }
    </style>
</head>

<body>
    <div class="block">
        A
    </div>
    <div class="block">
        B
    </div>
    <div class="block">
        C
    </div>
    <div class="block">
        D
    </div>
</body>

</html>

* position:relative; *

// 某个元素设置了relative值，则其top等值的偏移是相对本身在自然流中的位置；（原本的地理位置还会保留）

* position:absolute; *

// 某个元素设置了absolute值，则其top等值的偏移是相对最近的父元素；（原本的地理位置不会保留）

【注意】：如果有个元素设置为relative，则其余absolute的元素都会相对其做偏移

* position:fixed; *

// 某个元素设置了 fixed值，同absolute一样，如果没有父元素设置为relative，则依照body元素，在用户的视野里相对固定不动

* position:sticky; *

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css定位（position）

css体系中，position不仅仅是一个属性，还是一个模块（简单了解）；目录position:static； position:relative； position:absolute； position:fixed； position:sticky；*** position:static; *** // 默认值概念：自然流 / 常规流是什么？...
复制链接

扫一扫