使用 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>