HTML 中的相对定位元素默认不会跟随文本流流动，因为它们的位置是相对于原始位置进行定位的。但是，可以通过将它们嵌套在一个 inline 或 inline-block 元素中，并使用 vertical-align 属性来将它们与文本流对齐，从而使其沿着文本流流动。
以下是一个完整的 HTML 页面 UTF-8 示例，其中包含一个相对定位元素沿着文本流流动的示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Relative Positioning Example</title>
<style>
.container {
display: inline-block;
position: relative;
width: 100px;
height: 100px;
border: 1px solid black;
vertical-align: middle;
}
.box {
position: relative;
left: 50px;
top: 50px;
width: 50px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<p>This is a paragraph with some text before the box.</p>
<div class="container">
<div class="box"></div>
</div>
<p>This is a paragraph with some text after the box.</p>
</body>
</html>在上面的示例中，我们定义了一个名为 .container 的 div 元素，并将其 display 属性设置为 inline-block，这样它就可以与文本流对齐。然后，我们在 .container 中包含了另一个 div 元素，其 class 属性被设置为 .box。在 .box 元素中，我们将 left 和 top 属性分别设置为 50px，从而将其相对于其父元素 .container 向右下方移动。
请注意，在示例中，我们使用了 CSS 的样式表来定义元素的样式和位置。我们还使用了 vertical-align 属性来将 .container 元素与文本流对齐，并使其内部的 .box 元素跟随文本流流动。
正文完