Tailwind CSS - Bonus
Tailwind CSS - Using with Preprocessors
Tailwind CSS - Optimizing for Production

Tailwind CSS - Position

Quiz

Tailwind CSS Position is a utility class that helps us to align elements in the Document Object Model.

Tailwind CSS Position Classes

The following is the list of Tailwind CSS Position Classes that provides an effective way of elements positioning.

Class	CSS Properties
static	position: static;
fixed	position: fixed;
absolute	position: absolute;
relative	position: relative;
sticky	position: sticky;

Functionality of Tailwind CSS Position Classes

static: This class replaces CSS position: static; property. It is a default value and positioned element according to the flow of the document.
fixed: This class replaces CSS position: fixed; property. This class is used to fix the element position in the document .
absolute: This class replaces CSS position: absolute; property. This class is used to position elements relative to their nearest ancestor.
relative: This class replaces CSS position: relative; property. This class is used to position elements relative to their normal position.
sticky: This class replaces CSS position: sticky; property. This class positions elements relative to their nearest ancestor but sticks at some specific position on the screen when scrolled.

Tailwind CSS Position Class Examples

The following examples will illustrate the Tailwind CSS Position class utility.

Statically Positioning Element

The below example is illustrating the use of Tailwind CSS Static Class.

Example

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

Fixed Positioning Element

The below example is illustrating the use of Tailwind CSS Fixed Class.

Example

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

Absolutely Positioning Element

The below example is illustrating the use of Tailwind CSS Absolute Class.

Example

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

Relatively Positioning Element

The below example is illustrating the use of Tailwind CSS Relative Class.

Example

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

Sticky Positioning Element

The below example is illustrating the use of Tailwind CSS Sticky Class.

Example

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

Print Page