文档流

文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行，并在每行中按从左到右的顺序排放元素。让元素脱离文档流的方法有：浮动和定位（绝对定位/固定定位会脱离文档流）。

默认定位 static

static 是 position 属性的默认值。即没有定位，元素在正常的流中，top，right，bottom，left 和 z‐index 属性无效。

如果省略 position 属性，浏览器就认为该元素是 static 定位。这时，浏览器会按照源码的顺序，决定每个元素的位置，这称为"正常的页面流"（normal flow）。每个块级元素占据自己的区块（block），元素与元素之间不产生重叠，这个位置就是元素的默认位置。

相对定位 relative

relative表示，相对于默认位置（即static时的位置）进行偏移，即定位基点是元素原本默认的位置。它必须搭配top、bottom、left、right这四个属性一起使用，用来指定偏移的方向和距离。元素偏移之后，他本来在默认文档流中占据的位置仍然存在。

 

绝对定位 absolute

absolute表示，相对于最近的已定位的父元素进行定位，如果没有，则相对于 html 元素。

它有一个重要的限制条件：定位基点（一般是父元素）不能是 static 定位，否则定位基点就会变成整个网页的根元素 html 。另外，absolute 定位也必须搭配 top、bottom、left、right 这四个属性一起使用。绝对定位会让元素脱离标准文档流，该元素原本所占空间现在为零。

固定定位 fixed

fixed表示，相对于视口（viewport，浏览器窗口）进行偏移，即定位基点是浏览器窗口。这会导致元素的位置不随页面滚动而变化，好像固定在网页上一样。如网站顶端的固定导航、两侧固定的广告等。

它如果搭配top、bottom、left、right这四个属性一起使用，表示元素的初始位置是基于视口计算的，否则初始位置就是元素的默认位置。

（上图界面已经滚动一部分，但是 B 元素的位置未变）

磁贴定位 sticky

sticky：relative+fixed 的结合，元素在跨越特定阈值前为相对定位( relative )，之后为固定定位( fixed )。这是新增的定位方式，专门用于页面滚动的时候的定位，可以方便实现吸顶条的效果。

sticky 生效的前提是，必须搭配 top、bottom、left、right 这四个属性一起使用，不能省略，否则等同于 relative 定位，不产生"动态固定"的效果。原因是这四个属性用来定义"偏移距离"，浏览器把它当作sticky的生效门槛。

它的具体规则是，当页面滚动，父元素开始脱离视口时（即部分不可见），只要与 sticky 元素的距离达到生效门槛，relative 定位自动切换为 fixed 定位；等到父元素完全脱离视口时（即完全不可见），fixed 定位自动切换回 relative 定位。

请看下面的示例代码。（注意，除了已被淘汰的 IE 以外，其他浏览器目前都支持 sticky。但是，Safari 浏览器需要加上浏览器前缀-webkit-。）

（上图中，滚动到 B 元素设置的 top:10px 时，由相对定位变为固定定位，滚动到父元素底部不够 B 元素高度时，又变为相对定位） 

其他

position:relative 和负 margin 都可以使元素位置发生偏移，二者有什么区别？

• 相对定位后元素位置发生偏移，它仍会坚守原来占据的空间，不会让文档流的其他元素流入。
• 负margin会使元素在文档流中的位置发生偏移，它会放弃偏移之前占据的空间，紧挨其后的元素会填充这部分空间。

文档流、定位和父子元素高度之间的关系?

• 对于正常 static 定位，如果不对父元素设置高度，那么父元素的高度应该是所有自元素的高度之和。
• 如果使用相对定位，那么元素不会脱离文档流，父元素的高度还是其所有元素高度之和，但是相对定位的元素，可能超过父元素的范围。
• 如果使用绝对定位，那么元素会脱离文档流，父元素在计算高度的时候，会好像绝对定位的子元素不存在一样。
• 对于固定定位的情况，结果和绝对定位一致。

参考

参考教程：http://www.ruanyifeng/blog/2019/11/css-position.html

参考博客：https://blog.csdn/just_wq/article/details/90932521

参考博客：https://blog.csdn/jianghao233/article/details/80534835