Tailwind CSS - Position

Tailwind CSS Position 是一个实用类，可以帮助我们在文档对象模型 (Document Object Model) 中对齐元素。

Tailwind CSS Position 类

以下是 Tailwind CSS Position 类的列表，它们提供了一种有效的元素定位方法。

Tailwind CSS 位置类的功能

• 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>