Tailwind CSS - 定位

Tailwind CSS Position 是一種實用程式類，可幫助我們在文件物件模型中對齊元素。

Tailwind CSS Position 類

以下是Tailwind CSS Position 類列表，它提供了一種有效的元素定位方式。

類	CSS 屬性
static	position: static;
fixed	position: fixed;
absolute	position: absolute;
relative	position: relative;
sticky	position: sticky;

Tailwind CSS Position 類的功能

static: 此類替換 CSS position: static; 屬性。它是一個預設值，並根據文件流定位元素。
fixed: 此類替換 CSS position: fixed; 屬性。此類用於在文件中修復元素位置。
absolute: 此類替換 CSS position: absolute; 屬性。此類用於相對於其最近的祖先定位元素。
relative: 此類替換 CSS position: relative; 屬性。此類用於相對於其正常位置定位元素。
sticky: 此類替換 CSS position: sticky; 屬性。此類相對於其最近的祖先定位元素，但在滾動時會貼上在螢幕上的某個特定位置。

Tailwind CSS Position 類示例

以下示例將說明 Tailwind CSS Position 類實用程式。

靜態定位元素

以下示例說明了Tailwind CSS Static 類的用法。

示例

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-3xl mb-3">
        Tailwind CSS Static Class
    </h2>
    <div class="inline-block p-10 mb-5
                border-2 border-black w-80
                bg-green-200 h-24">
        <h2>Normal Box</h2>
        <p>This is a normal box.</p>
    </div>

    <div class="p-10 static w-80 h-24
                border-2 border-black 
                bg-violet-200 mb-5">
        <h2>Position: static</h2>
        <p>This is a box with static position.</p>
    </div>
</body>

</html>

固定定位元素

以下示例說明了Tailwind CSS Fixed 類的用法。

示例

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
    <h2 class="text-3xl mb-3">
        Tailwind CSS Position Fixed Class
    </h2>
    <div class="bg-green-100 overflow-auto 
                w-80 h-48 p-1.5 space-y-2 ">
        <p>
            Tutorials Point originated from the idea 
            that there exists a class of readers who
            respond better to online content and prefer
            to learn new skills at their own pace from the
            comforts of their drawing rooms.
        </p>
        
        <p class="fixed p-1.5 text-center
                bg-violet-200 top-28 left-24">
            This is Fixed Element</p>
        
            <p>
            We have established a Digital Content Marketplace 
            to sell Video Courses and eBooks at a very nominal 
            cost.
        </p>
        <p>
            Aur mission is to deliver Simply Easy Learning with
            clear, crisp, and to-the-point content on a wide range 
            of technical and non-technical subjects.
        </p>
        <p>
            Our Text Library Content and resources are freely 
            available and we prefer to keep it that way to 
            encourage our readers acquire as many skills as 
            they would like to.
        </p>
    </div>
</body>
</html>

絕對定位元素

以下示例說明了Tailwind CSS Absolute 類的用法。

示例

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
    <h2 class="text-3xl mb-3">
        Tailwind CSS Absolute Class
    </h2>
    <div class="p-10 mb-5 relative
                border-2 border-black w-auto
                bg-green-200 h-48 ">
        
        <div class="p-6 w-64 h-24 absolute
                    border-2 border-black 
                    bg-violet-200 top-2 left-2">
            This is a box with absolute position.
        </div>
    </div>
</body>
</html>

相對定位元素

以下示例說明了Tailwind CSS Relative 類的用法。

示例

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
    <h2 class="text-3xl mb-3">
        Tailwind CSS Relative Class
    </h2>
    <div class="inline-block p-10 mb-5
                border-2 border-black w-80
                bg-green-200 h-24">
        <p>This is a normal box.</p>
    </div>

    <div class="p-10 relative w-80 h-24
                border-2 border-black 
                bg-violet-200 mb-5">
        <p>This is a box with Relative position.</p>
    </div>
</body>
</html>

粘性定位元素

以下示例說明了Tailwind CSS Sticky 類的用法。

示例

<!DOCTYPE html> 
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-3xl mb-3">
        Tailwind CSS Position Sticky Class
    </h2>
    <div class="bg-green-100 overflow-auto 
                w-80 h-48 p-1.5 space-y-2 relative">
        <p>
            Tutorials Point originated from the idea 
            that there exists a class of readers who 
            respond better to online content and prefer
            to learn new skills at their own pace from 
            the comforts of their drawing rooms.
        </p>
        <p class="sticky p-1.5 text-center
                  bg-violet-200 top-10 left-24">
            This is Sticky Element</p>
        <p>
            We have established a Digital Content Marketplace 
            to sell Video Courses and eBooks at a very nominal 
            cost.
        </p>
        <p>
            Aur mission is to deliver Simply Easy Learning with
            clear, crisp, and to-the-point content on a wide range 
            of technical and non-technical subjects.
        </p>
        <p>
            Our Text Library Content and resources are freely 
            available and we prefer to keep it that way to 
            encourage our readers acquire as many skills as 
            they would like to.
        </p>
    </div>
</body>

</html>

列印頁面