Tailwind CSS Positions
The position utility class in Tailwind CSS allows you to control the positioning behavior of an element within its containing parent or the entire viewport. With Tailwind's position class, you can easily manipulate the placement of elements on your web page. Tailwind CSS allows you to apply position classes responsively at different breakpoints. To use responsive position classes, you can append the breakpoint prefix to the utility class.
To apply a specific position to an element, you can use the position-{value} utility class, where {value} represents the desired position. Some of the positions are static, absolute, fixed, etc.
Static
The default position value follows the normal flow of the document, and it doesn't require any additional classes. Elements with position-static properties are positioned according to the normal flow of the document.
<div class="w-full relative h-44 bg-indigo-50 p-8 rounded-xl">
<div class="static w-full h-full">
<div
class=" bg-indigo-200 p-3 rounded-lg font-medium font-manrope text-lg text-indigo-600 w-full h-full">
Static parent</div>
<div
class="absolute bottom-0 left-0 rounded-xl w-40 h-14 flex items-center justify-center bg-indigo-600 text-white text-base font-medium">
Absolute child</div>
</div>
</div>
Relative
Adding a relative position to an element means it's positioned relative to its normal position in the document flow. You can adjust its position using top, right, bottom, and left utility classes. Use the below tailwind CSS position relative example as a reference for your project.
<div class="w-full relative h-44 bg-indigo-50 p-8 rounded-xl">
<div class="relative w-full h-full">
<div
class=" bg-indigo-200 p-3 rounded-lg font-medium font-manrope text-lg text-indigo-600 w-full h-full">
relative parent</div>
<div
class="absolute bottom-0 left-0 rounded-xl w-40 h-14 flex items-center justify-center bg-indigo-600 text-white text-base font-medium">
Absolute child</div>
</div>
</div>
Absolute
Tailwind CSS Postion absolute positions the element relative to its nearest positioned parent. If no parent is positioned, it is positioned relative to the initial containing block (usually the viewport).
Relative Parent
Static parent
Relative Parent
Static parent
<div class="flex flex-col gap-10 w-full">
<div class="w-full relative h-auto bg-indigo-200 p-5 pt-2 rounded-xl">
<p class="text-base font-semibold text-indigo-600 pb-3">Relative Parent</p>
<div class="static w-full p-3 rounded-lg h-auto bg-indigo-50">
<p class="font-medium font-manrope text-lg text-indigo-600 mb-3">Static parent</p>
<div class="flex items-center gap-5">
<div class="rounded-lg px-5 py-3.5 bg-indigo-600 text-white text-base font-medium ">Static child</div>
<div class="rounded-lg px-5 py-3 border-2 border-indigo-600 text-indigo-600 text-base font-medium ">Static sibling</div>
</div>
</div>
</div>
<div class="w-full relative h-auto bg-indigo-200 p-5 pt-2 rounded-xl">
<p class="text-base font-semibold text-indigo-600 pb-3">Relative Parent</p>
<div class="static w-full p-3 rounded-lg h-auto bg-indigo-50">
<p class="font-medium font-manrope text-lg text-indigo-600 mb-3">Static parent</p>
<div class="flex items-center gap-5">
<div class="absolute top-0 right-0 rounded-lg px-5 py-3.5 bg-indigo-600 text-white text-base font-medium ">absolute child</div>
<div class="rounded-lg px-5 py-3 border-2 border-indigo-600 text-indigo-600 text-base font-medium ">Static sibling</div>
</div>
</div>
</div>
</div>
Centering
You can add inset-0 to the elements to center an absolutely positioned element horizontally and vertically within its containing element. Use top-0, right-0, bottom-0, or left-0 to center an absolutely positioned element to the top, right, bottom, or left of its containing element.
<div class="relative w-full h-44 bg-indigo-50 p-8 rounded-xl">
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-xl w-40 h-14 flex items-center justify-center bg-indigo-600 text-white text-base font-medium">
Absolute child</div>
</div>
Fixed
Positions the element relative to the viewport. It remains fixed even when the page is scrolled. You can use the below example of a tailwind CSS position fixed using utility classes.
Flowers, the delicate jewels of nature, captivate with their kaleidoscope of colors, intricate patterns, and alluring fragrances. Each bloom tells a story of life, from the tender bud emerging from the earth to the full blossom basking in the sun's warmth. They symbolize love, beauty, and renewal, enchanting us with their ephemeral existence. From the regal elegance of roses to the cheerful vibrancy of sunflowers, flowers hold a universal allure, evoking emotions and memories with their mere presence. Whether adorning a bridal bouquet, brightening a room, or gracing a meadow with their splendor, flowers whisper secrets of the natural world, inviting us to pause, breathe, and appreciate the fleeting beauty that surrounds us.
<div class="relative w-full h-auto max-w-xs mx-auto rounded-lg shadow-sm shadow-gray-400 overflow-auto">
<div
class="absolute z-20 top-0 right-0 left-0 py-2.5 px-3 text-lg font-manrope font-semibold text-white bg-indigo-600/75 backdrop-blur-sm text-center">
Flowers</div>
<div class="flex flex-col gap-5 pt-14 px-6 overflow-auto h-80">
<p class="text-base font-normal text-gray-900">
Flowers, the delicate jewels of nature, captivate with their kaleidoscope of colors, intricate patterns, and
alluring fragrances. Each bloom tells a story of life, from the tender bud emerging from the earth to the
full blossom basking in the sun's warmth. They symbolize love, beauty, and renewal, enchanting us with their
ephemeral existence. From the regal elegance of roses to the cheerful vibrancy of sunflowers, flowers hold a
universal allure, evoking emotions and memories with their mere presence. Whether adorning a bridal bouquet,
brightening a room, or gracing a meadow with their splendor, flowers whisper secrets of the natural world,
inviting us to pause, breathe, and appreciate the fleeting beauty that surrounds us.
</p>
</div>
</div>
Sticky
It allows an element to behave like position relative within its parent until a given offset threshold is met in the viewport, in which case it "sticks" to the top or bottom of the viewport accordingly.
Rose
Tulip
Lily
Orchid
Hydrangea
Apple
Banana
Orange
Strawberry
Grape
Mango
Carrot
Tomato
Potato
Onion
Lettuce
Cucumber
Bell pepper
Broccoli
Spinach
<div class="relative w-full h-96 max-w-md mx-auto rounded-lg shadow-sm shadow-gray-400 overflow-auto">
<div class="sticky z-10 top-0 right-0 left-0 py-2.5 px-3 text-lg font-manrope font-semibold text-white bg-indigo-600/75 backdrop-blur-sm text-center">Flowers</div>
<div class="flex flex-col gap-5 p-5 ">
<div class="flex">
<p class="text-base font-medium text-gray-900">Rose</p>
</div>
<div class="flex">
<p class="text-base font-medium text-gray-900">Tulip</p>
</div>
<div class="flex">
<p class="text-base font-medium text-gray-900">Lily</p>
</div>
<div class="flex">
<p class="text-base font-medium text-gray-900">Orchid</p>
</div>
<div class="flex">
<p class="text-base font-medium text-gray-900">Hydrangea</p>
</div>
</div>
<div class="sticky z-10 top-0 right-0 left-0 py-2.5 px-3 text-lg font-manrope font-semibold text-white bg-indigo-600/75 backdrop-blur-sm text-center">Fruits</div>
<div class="flex flex-col gap-5 p-5 ">
<div class="flex">
<p class="text-base font-medium text-gray-900">Apple</p>
</div>
<div class="flex">
<p class="text-base font-medium text-gray-900">Banana</p>
</div>
<div class="flex">
<p class="text-base font-medium text-gray-900">Orange</p>
</div>
<div class="flex">
<p class="text-base font-medium text-gray-900">Strawberry</p>
</div>
<div class="flex">
<p class="text-base font-medium text-gray-900">Grape</p>
</div>
<div class="flex">
<p class="text-base font-medium text-gray-900">Mango</p>
</div>
</div>
<div class="sticky z-10 top-0 right-0 left-0 py-2.5 px-3 text-lg font-manrope font-semibold text-white bg-indigo-600/75 backdrop-blur-sm text-center">Vegetables</div>
<div class="flex flex-col gap-5 p-5 ">
<div class="flex">
<p class="text-base font-medium text-gray-900">Carrot</p>
</div>
<div class="flex">
<p class="text-base font-medium text-gray-900">Tomato</p>
</div>
<div class="flex">
<p class="text-base font-medium text-gray-900">Potato</p>
</div>
<div class="flex">
<p class="text-base font-medium text-gray-900">Onion</p>
</div>
<div class="flex">
<p class="text-base font-medium text-gray-900">Lettuce</p>
</div>
<div class="flex">
<p class="text-base font-medium text-gray-900">Cucumber</p>
</div>
<div class="flex">
<p class="text-base font-medium text-gray-900">Bell pepper</p>
</div>
<div class="flex">
<p class="text-base font-medium text-gray-900">Broccoli</p>
</div>
<div class="flex">
<p class="text-base font-medium text-gray-900">Spinach</p>
</div>
</div>
</div>