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; 属性。此类相对于其最近的祖先定位元素，但在滚动时会粘贴在屏幕上的某个特定位置。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

Tailwind CSS Position 类示例

以下示例将说明 Tailwind CSS Position 类实用程序。

静态定位元素

以下示例说明了Tailwind CSS Static 类的用法。

示例

Open Compiler

<!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 类的用法。

示例

Open Compiler

<!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 类的用法。

示例

Open Compiler

<!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 类的用法。

示例

Open Compiler

<!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 类的用法。

示例

Open Compiler

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

打印页面