CSS Position 用小白的见解解释相对定位和绝对定位

首先我们要知道，如果没有position指定元素的位置，元素便会默认一个一个从上往下排列，这种叫流（在别人的教程里会叫普通流，正常流，文章流等等）

例如：

<body>

<div class="box1">box1box1box1box1box1box1</div>
<div class="box2">box2box2box2box2box2box2</div>
<div class="box3">box3box3box3box3box3box3</div>
<div class="box4">box4box4box4box4box4box4</div>


<style>
    .box1{
        height: 100px;
        background-color: red;
    }

    .box2{
        height: 100px;
        background-color: green;
    }

    .box3{
        height: 100px;
        background-color: yellow;
    }

    .box4{
        height: 100px;
        background-color: blue;
    }
  
</style>

</body>

效果：正常的排列

1.Position: static

忽略top, bottom, left, right 或者 z-index 声明，元素出现在正常的流中

<style>
    .box1{
        position: static;
        top:100000000px; /*important*/
        left:10000000px; /*important*/
        height: 100px;
        background-color: red;
    }

    .box2{
        height: 100px;
        background-color: green;
    }

    .box3{
        height: 100px;
        background-color: yellow;
    }

    .box4{
        height: 100px;
        background-color: blue;
    }
  
</style>

效果不更改

2.Position: relative

相对定位，相对于自己的初始位置，不脱离文档流。也就是说相对于元素原来在流中的位置进行偏移

<style>
    .box1{
        position: relative;
        
        left:100px;/*important*/
        
        height: 100px;
        background-color: red;
    }

    .box2{
        height: 100px;
        background-color: green;
    }

    .box3{
        height: 100px;
        background-color: yellow;
    }

    .box4{
        height: 100px;
        background-color: blue;
    }
  
</style>

原来红色box1的位置相对于现在改变过的位置，是在现在box1位置的左边100px

（也就是，relative后left，其实是向右移动，relative后top，其实是向下移动）

3.Position: absolute

绝对定位是相对于元素最近的已定位的祖先元素（即是设置了绝对定位或者相对定位的祖先元素）。如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（body）。

绝对定位与流无关，所以它们可以覆盖页面上其他的元素，可以通过z-index属性来控制这些层的对方顺序。

<style>
    .box1{
        position: absolute;
        
        left:100px;/*important*/
        
        height: 100px;
        background-color: red;
    }

    .box2{
        height: 100px;
        background-color: green;
    }

    .box3{
        height: 100px;
        background-color: yellow;
    }

    .box4{
        height: 100px;
        background-color: blue;
    }
  
</style>

由于box1的祖先元素都没有定位，所以相对于最初的包含块也就是body，同时由于绝对定位脱离文档流，所以box1会与box2重合。至于到底是红色遮住绿色还是绿色遮住红色，可以由z-index属性来控制

4.Position: fixed

fixed元素脱离正常的文档流，元素的位置相对于浏览器窗口是固定位置。

即使窗口是滚动的它也不会移动

<style>
    .box1{
        position: fixed;
        
        left:100px;/*important*/
        
        height: 100px;
        background-color: red;
    }

    .box2{
        height: 100px;
        background-color: green;
    }

    .box3{
        height: 100px;
        background-color: yellow;
    }

    .box4{
        height: 100px;
        background-color: blue;
    }
  
</style>

比如我们常见的回到顶部的功能，按钮一直在浏览器的左下方，不管滚动条如何滚动，该按钮都会在左下方的固定的位置，这个需求就可以使用position: fixed来完成。

5.position: inherit

inherit值如同其他css属性的 inherit 值，即继承父元素的position值。

6.position: sticky

这是一个相对来讲比较新的属性值
sticky 的本意是粘贴，可以称之为粘性定位，但在 css 中的表现更像是吸附。这是一个结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位。常见的吸顶、吸底（网站的头部返回栏，底部切换栏之类）的效果用这个属性非常适合。例如下面淘宝这个效果

当元素距离页面视口（Viewport，也就是fixed定位的参照）顶部距离大于 0px 时，元素以 relative 定位表现，而当元素距离页面视口小于 0px 时，元素表现为 fixed 定位，也就会固定在顶部。

须指定 top、right、bottom、left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
并且 top 和 bottom 同时设置时，top 生效的优先级高，left 和 right 同时设置时，left 的优先级高。
设定为 position:sticky 元素的任意父节点的 overflow 属性必须是 visible，否则 position:sticky 不会生效。如果 position:sticky 元素的任意父节点定位设置为 overflow:hidden，则父容器无法进行滚动，所以 position:sticky 元素也不会有滚动然后固定的情况。如果 position:sticky 元素的任意父节点定位设置为 position:relative | absolute | fixed，则元素相对父元素进行定位，而不会相对 viewport 定位。
达到设定的阀值，也就是设定了 position:sticky 的元素表现为 relative 还是 fixed是根据元素是否达到设定了的阈值决定的。

详解relative定位与absolute定位的区别

（来自CSS position 相对定位和绝对定位 | 菜鸟教程 (runoob.com)）

实例：

HTML代码：

css代码：

初始效果：

1、relative：相对于原来位置移动，元素设置此属性之后仍然处在文档流中，不影响其他元素的布局

给第二个box设置relative：

元素相对于原来位置偏移，宽高都没变，撑大了容器。

2、absolute:元素会脱离文档流，如果设置偏移量，会影响其他元素的位置定位

只给第五个box设置absolute：

说明：元素在没有定义宽度的情况下，宽度由元素里面的内容决定，效果和用float方法一样。

absolute定位原理剖析：

1.在父元素没有设置相对定位或绝对定位的情况下，元素相对于根元素定位（即html元素）（是父元素没有）。

现在给box5偏移值来验证：

2.父元素设置了相对定位或绝对定位，元素会相对于离自己最近的设置了相对或绝对定位的父元素进行定位（或者说离自己最近的不是static的父元素进行定位，因为元素默认是static）。

补充：网上有人解释为元素会相对于第一个不是static的父元素定位，我觉得这很容易让人产生误解。以上是我自己的定义。

现在给body元素一个绝对定位（body元素设置为了absolute，整个容器的宽度由最长div决定，宽度变小了）：

此时的box5现在相对于body元素定位

我把上面相对于html元素定位和相对于body定位的两张图放在一起，对比可以看到下面的图，相对于body定位的box5距离文字box1要远一点。所以在没有父元素设置相对定位或绝对定位的情况下，设置了absolute的元素会相对于html根元素定位。

css代码：

再来验证这句话：父元素设置了相对定位或绝对定位，元素会相对于离自己最近的设置了相对或绝对定位的父元素进行定位

现在给box们套三个父容器，如下：

html代码：

三个父容器的css样式如下：

现在的样子，现在的box5并不是所说的相对于第一个不是static的元素定位（按这句话的说法，现在我的box5应该相对于最外层容器1偏移才对），而是相对于离自己最近的一层的设置了相对或绝对定位的父元素定位：

现在把第二个容器和第三个容器的position注释掉（没有position，设置top、left、bottom、right值都没有效），结果如下：

现在box5的外层设置了相对或绝对的父元素只有最外层容器1，所以box5现在相对于最外层容器1定位。（明显box5移动了）

现在只注释掉第三个容器的position

原理也是一样，现在相对于第二个容器定位（top：50px，离自己最近的设置了相对或绝对定位的父元素）：

上面第二个和第三个容器都设置的是相对定位，现在改成绝对定位：

css代码：

原理和把第二、第三个容器设置为relative一样，只是设置为absolute了之后，第三个容器包含着内容一起脱离了文档，所以没有撑开外面两层容器的宽度

现在的效果：

外面再添一个容器，来验证上面第一、第二没有被撑开的效果

宽度受到上一层的父容器的宽度限制，现在拉宽第一层的容器的宽度，第二层和第三层随之变宽，效果如下：

但是如果容器里面有长的div，容器仍然可以被撑开，效果如下：

补充：

box2设置为absolute定位之后，脱离文档流，box3向上移，左边被box2遮盖了。

在上面的基础上，box3设置absolute，box3脱离文档流（就好像box3浮起来了一样，浮在了box2上面），box4往上移，box3盖住box2，和部分box4.

同理如果box4设置了绝对定位，就会浮起来盖住box3和box2。

总结

relative：定位是相对于自身位置定位（设置偏移量的时候，会相对于自身所在的位置偏移）。设置了relative的元素仍然处在文档流中，元素的宽高不变，设置偏移量也不会影响其他元素的位置。最外层容器设置为relative定位，在没有设置宽度的情况下，宽度是整个浏览器的宽度。

absolute：定位是相对于离元素最近的设置了绝对或相对定位的父元素决定的，如果没有父元素设置绝对或相对定位，则元素相对于根元素即html元素定位。设置了absolute的元素脱了了文档流，元素在没有设置宽度的情况下，宽度由元素里面的内容决定。脱离后原来的位置相当于是空的，下面的元素会来占据位置。

本文禁止转载！

原创文章，作者：Rosmontics，如若转载，请注明出处：https://rosmontis.com/archives/147