关于前端:绝对相对固定定位三者区别你都知道哪些

7次阅读

共计 1681 个字符，预计需要花费 5 分钟才能阅读完成。

原文链接：https://note.noxussj.top/?sou…

文档流布局形式，依照程序一个个排列好，成果如下图：

<html>
    <head>
        <style>
            .box1 {
                width: 100px;
                height: 100px;
                background-color: #ff8077;
            }

            .box2 {
                width: 100px;
                height: 100px;
                background-color: #5cd8a2;
            }
        </style>
    </head>
    <body>
        <div class="box1"></div>
        <div class="box2"></div>
    </body>
</html>

该元素脱离文档流，不参加布局一个个排列。齐全自在想去哪里就去哪里。写了相对定位就要写上 left 和 top。这两者默认是间隔文档左上角的间隔。

<html>
    <head>
        <style>
            .box1 {
                position: absolute;
                left: 20px;
                top: 20px;
                width: 100px;
                height: 100px;
                background-color: #ff8077;
            }

            .box2 {
                width: 100px;
                height: 100px;
                background-color: #5cd8a2;
            }
        </style>
    </head>
    <body>
        <div class="box1"></div>
        <div class="box2"></div>
    </body>
</html>

留神： 因为预览模式是模仿的，为了让小伙伴更好的观看，能够把灰色设想成就是文档局部 body 标签。而且 body 标签默认是自带了 8px 的 margin。

方才曾经介绍了相对定位能够通过 left 和 top 来管制间隔文档左上角的间隔，也就是说 left 和 top 是绝对于 “ 文档 ” 进行定位的。而绝对定位则是把这个绝对于 “ 某某元素 ” 进行批改。

<html>
    <head>
        <style>
            .box1 {
                position: absolute;
                left: 20px;
                top: 20px;
                width: 100px;
                height: 100px;
                background-color: #ff8077;
            }

            .box2 {
                position: relative;
                width: 100px;
                height: 100px;
                background-color: #5cd8a2;
            }
        </style>
    </head>
    <body>
        <div class="box2">
            <div class="box1"></div>
        </div>
    </body>
</html>

把 box1 放进 box2 外面，并且给 box2 设置绝对定位 position: relative 那么 box1 的 left 和 top 就会绝对于 box2 的左上角原点。

固定定位和相对定位很像，能够让元素飘起来，想去哪里去哪里。然而相对定位是绝对于 “ 某某元素 ” 进行定位的。而固定定位则是永远是绝对于 “ 浏览器可视区左上角 ”。只管呈现了滚动条也是丝毫不影响。

<html>
    <head>
        <style>
            .box1 {
                position: fixed;
                left: 0;
                top: 0;
                width: 100px;
                height: 100px;
                background-color: #ff8077;
            }

            .box2 {
                position: relative;
                width: 100px;
                height: 100px;
                background-color: #5cd8a2;
            }
        </style>
    </head>
    <body>
        <div class="box2">
            <div class="box1"></div>
        </div>
    </body>
</html>

能够发现只管 box1 在 box2 外面，并且 box2 也设置了绝对定位，box1 仍然间接忽视了，间接绝对于 “ 可视区左上角 ” 进行定位。

最全面的前端笔记来啦，蕴含了入门到入行的笔记，还反对实时成果预览。小伙伴们不须要在花工夫去写笔记，或者是去网上找笔记了。面试高频发问和你想要的笔记都帮你写好了。反对挪动端和 PC 端浏览，深色和浅色模式。

原文链接：https://note.noxussj.top/?sou…

正文完