CSS文档流与相对定位技术

本文主要介绍了CSS中的文档流、浮动布局、流式布局和定位布局，包括BFC规则、相对定位、绝对定位和固定定位的使用场景及差异。

CSS 文档流与相对定位技术

在前端开发中，CSS（层叠样式表）起着至关重要的作用，它决定了网页的布局和样式，文档流和相对定位技术是两个关键的概念，它们对页面元素的排列和定位有着深远的影响。

一、文档流

文档流是指文档中可显示对象在排列时所占用的位置，在默认情况下，元素按照 HTML 中的顺序从上到下、从左到右依次排列，形成一个自然的流动布局，每个非浮动块级元素都独占一行，内联元素则不会独占一行，相邻的行内元素会排列在同一行里，直到一行排不下，才会换行。

常见的<div> 标签默认就是块级元素，它会独占一行；而<span> 标签是行内元素，它可以与其他行内元素在同一行显示，这种自然的文档流布局方式使得网页内容能够有序地呈现，符合用户的阅读习惯。

二、相对定位技术

1、定义：相对定位是指元素相对于其在文档流中的原始位置进行定位，通过设置position: relative; 来开启元素的相对定位，然后可以使用top、bottom、left、right 等属性来指定元素相对于其原始位置的偏移量。

2、特点：设置了相对定位的元素仍然保留在文档流中的空间，即它原来的位置会被保留下来，其他元素会围绕它进行布局，只是该元素在视觉上发生了偏移，如果一个<div> 元素设置了相对定位并向右偏移了 50px，那么它后面的元素仍然会在它原本的位置开始显示，就好像它还在那里一样，只是在视觉上该元素向右移动了 50px。

3、应用场景：相对定位通常用于需要对某个元素进行微调的场景，比如将一个图片或文本稍微偏离其默认位置，以实现一些特殊的视觉效果或布局需求，它也常与绝对定位配合使用，为绝对定位的元素提供一个定位的参考基准。

三、FAQs

1、问题：相对定位的元素会脱离文档流吗？

回答：不会，相对定位的元素仍然保留在文档流中的空间，它原来的位置会被保留下来，其他元素会围绕它进行布局，只是该元素在视觉上发生了偏移。

2、问题：相对定位和绝对定位有什么区别？

回答：相对定位是相对于元素在文档流中的原始位置进行定位，而绝对定位是相对于最近的已定位祖先元素进行定位，如果没有已定位的祖先元素，则相对于初始包含块（通常是浏览器窗口）进行定位，相对定位的元素仍然保留在文档流中，绝对定位的元素则脱离文档流。