Tailwind CSS - Position
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>
Advertisements