使用 CSS 移动文本

Jay Singh 2023年2月20日 2022年4月20日

CSS CSS Shift

在 CSS 中使用相对定位移动文本
在 CSS 中使用绝对定位移动文本

CSS 帮助定位 HTML 元素。任何 HTML 元素都可以放置在页面的任何位置。

你可以选择元素的定位是相对于页面的自然位置还是相对于其父元素的绝对位置。你现在可以根据需要移动有关页面的文本。

使用 position 属性和 top 和 left 两个值，你可以将 HTML 文本元素移动到页面上的任何位置。

如果你必须将文本向左移动，请为 left 使用负值。
如果你必须将文本向右移动，请为 left 使用正值。
如果你必须将文本向上移动，请为 top 使用负值。
如果你必须将文本向下移动，请为 top 使用正值。

在 CSS 中使用相对定位移动文本

在此示例中，相对定位会相对于它通常显示的位置移动文本元素的位置。随着值的增加或减少，你可以移动文本元素。

<html>
    <head>
    </head>
    <body>
        <div style = "position:relative; left:80px; top:20px; background-color:yellow;">
            Hello! I am DelftStack.
        </div>
    </body>
</html>

在 CSS 中使用绝对定位移动文本

使用 position: absolute，元素的坐标相对于屏幕的左上角。

<html>
    <head>
    </head>
    <body>
        <div style = "position:absolute; left:80px; top:20px; background-color:yellow;">
            Hello! I am DelftStack.
        </div>
    </body>
</html>