引言
从这张图片上你看到了什么？
一个‘div1’，一个‘div2’以及包围着它们的长方形格子，‘这是一张图片’六个字，和一张拳击图片。这是从普通人的视角出发看到的，而作为一名程序员，我们自然不会看的如此浅薄，我们知道div1和div是两个盒子，这是块级元素，它会占据一行，而‘这是一张图片’六个字，和拳击图片是行内元素，则会在同一行内水平排列，那么它为什么会按这样的顺序排列呢，这就是今天要讲的——文档流
文档流的本质
当浏览器解析HTML文档时，它会按照文档的结构顺序来渲染页面上的元素。这个过程可以形象地理解为一种“流”，即每个元素按照其在HTML代码中出现的顺序依次排列。这种自然的排列方式被称为文档流。
在文档流中，块级元素（如<div>、<p>等）会占据一整行的空间，并且从上到下排序；而行内元素（如<span>、<a>等）则会在同一行内从左往右水平排列，直到遇到块级元素或行尾。每个元素的大小和位置是由其内容、内边距（padding）、边框（border）以及外边距（margin）共同决定的。
position属性与文档流的关系
CSS中的position属性允许我们以更灵活的方式控制元素的布局。它主要有以下几种取值：static、relative、absolute、fixed以及sticky。其中，relative和absolute是我们讨论的重点，因为它们直接涉及到文档流的概念。
Relative 相对定位
相对定位通过设置left、right、top、bottom属性来调整元素相对于其正常位置（即在文档流中的位置）的偏移量。使用相对定位的元素依然占据着它原本在文档流中的空间，即使它已经移动到了新的位置。这意味着其他元素不会填补它留下的空白，页面布局也不会因此发生改变。
例如，如果有一个<div>元素设置了position: relative;并且top: 20px;，那么这个<div>将会向下移动20像素，但它原来所在的位置仍然会被保留。
Absolute 绝对定位
绝对定位使元素完全脱离了文档流。这意味着该元素不再占据任何空间，其他元素会像它不存在一样进行布局。绝对定位的元素会根据最近的一个已定位祖先元素（具有非static定位的祖先元素）来确定其位置。如果没有这样的祖先元素，则该元素将相对于<body>元素进行定位。
例如，一个设置了position: absolute;并且left: 50px; top: 50px;的<div>，如果它的父容器也设置了定位（比如position: relative;），那么这个<div>就会相对于父容器的左上角向右50像素、向下50像素的位置显示。
结论
理解文档流和position属性的工作原理，对于创建响应式和动态的网页布局至关重要。相对定位提供了一种微调元素位置的方法，而绝对定位则允许我们更加自由地控制页面上任意元素的具体位置。掌握这些基础知识，可以帮助开发者构建出既美观又实用的网页界面。
