迹忆客 专注技术分享

有时，在开发网页时，我们将文本放在底部或页脚中，因此我们可能需要在文本下方留一个空格并将文本上移。 我们将学习如何从网页底部向上移动文本。

使用 position 和 bottom CSS 属性将文本向上移动

在下面的示例中，我们创建了 <div> 元素，我们可以使用 bottom-text 类名来识别它。 在 <div> 元素内，我们添加了带有一些文本的 <h3> 元素，并为其分配了一个文本类。

在 CSS 代码中，我们给 <div> 元素指定了 position: absolute 以使其相对于其父元素（即文档本身）移动。 此外，我们还提供了 margin-top: 90vh ，它将把带有类名 bottom-text 的 <div> 元素放在网页的底部。

我们在文本类中添加了一些 CSS 以将文本从当前位置向上移动。 在这里，我们选择 relative 作为 position 属性的值，它允许我们相对于它的位置移动文本。

为了向上移动文本，我们使用了 bottom 属性，它将文本向上移动 60px，因为我们已经分配了该值。 用户还可以更改 bottom 属性的值并将文本向上移动不同的量。

为 bottom 属性分配负值将使文本向下移动。

HTML 代码：

<div class="bottom-text">
    <h3 class="text">This is the text at bottom.</h3>
</div>

CSS 代码:

.bottom-text{
    position: absolute;
    margin-top: 90vh;
}
.text{
    position: relative;
    bottom: 60px;
}

在上面的输出图像中，左图显示文本在其原始位置，右图显示文本从当前位置向上移动后的文本。

使用 margin-top CSS 属性将文本向上移动

在下面的示例中，我们使用 margin-top CSS 属性将文本从当前位置向上移动。

如上例所述，此示例还包含具有 bottom-text 类的 <div> 元素和具有文本类名称的 <h3> 元素。 我们通过向 bottom-text 类添加一些 CSS 来设置网页底部的文本。

要向上移动文本，我们将 margin-top 属性应用于文本类并为其分配负值。 将 margin-top 属性设置为正值会将文本向下移动值。

HTML 代码：

<div class="bottom-text">
    <h3 class="text">This text will be shown at the bottom.</h3>
</div>

CSS 代码:

.bottom-text{
    position: absolute;
    margin-top: 90vh;
}
.text{
    margin-top:-100px;
}

margin-top 负值是将文本或任何 HTML 元素从其当前位置向上移动的最佳方式。