Tailwind CSS Position
The position class acknowledges more than one value in tailwind CSS. It is an option in contrast to the CSS Position property. This class is utilized for controlling how an element is situated in the DOM.
Position classes
The various position classes in Tailwind CSS are classified as:
- Static
- Fixed
- Absolute
- Relative
- sticky
static class
This class is utilized to set the place/position of an element as indicated by the ordinary flow of the document.
Syntax
<element class="static">...</element>
Example:
<!DOCTYPE html> <head> <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <center> <h1 class="text-red-600 text-5xl font-bold"> Tutorial and Example </h1> <b>Position Class - Tailwind CSS </b> <div class="static text-left p-2 m-2 bg-orange-200 h-48"> <p class="font-bold">Static Parent</p> <div class="absolute bottom-0 left-0 p-2 bg-red-500"> <p>Absolute Child</p> </div> </div> </center> </body> </html>
Output:
fixed class
This class will be situated fixed to the viewport. An element with fixed situating permits it to stay at a similar position even we scroll the page. We can set the place/position of the element utilizing the top, right, bottom, left.
Syntax:
<element class="fixed">...</element>
Example:
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <center> <h1 class="text-red-600 text-5xl font-bold"> Tutorial and Example </h1> <b>Position Class - Tailwind CSS </b> <div class="overflow-auto bg-red-200 mx-16 h-24 text-justify"> <div class="float-right fixed"> <p class="bg-red-500 p-2"> Tutorial and Example Fixed Child </p> </div> <p> How frequently were you baffled while paying special attention to a decent assortment of programming/calculation/inquiries questions? What did you expect and what did you get? This entrance has been made to give elegantly composed, very much idea and well-clarified answers for chosen questions. An IIT Roorkee former student and organizer of Javatpoint. He loves to settle programming Issues in most proficient ways. Aside from Javatpoint, has worked with DE Shaw , what's more, Co. as a product engineer and JIIT Noida as an associate teacher. It is a great stage to get the hang of programming. It is an instructive site. Get ready for the Enrolments drive of item-based organizations like Microsoft, Amazon, Adobe, and so on with a free web-based position arrangement course. </p> </div> </center> </body> </html>
Output:
In that above output, if we scroll the scrollbar up-down the content will scroll and the “Javatpoint Fixed Child” remain constant.
absolute class
This class is utilized to set the place/position of an element outside the normal flow of the document, making adjoining elements go about as though the element doesn't exist.
Syntax:
<element class="absolute">...</element>
Example:
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <center> <h1 class="text-red-600 text-5xl font-bold"> Tutorial and Example </h1> <b>Position Class - Tailwind CSS </b> <div class="static text-left p-2 m-2 bg-red-200 h-48"> <p class="font-bold">Static parent</p> <div class="absolute bottom-0 left-0 p-2 bg-red-500"> <p>Absolute child</p> </div> </div> </center> </body> </html>
Output:
relative class
This class is utilized to set the place/position of an element comparative with the ordinary/normal flow of the document.
Syntax:
<element class="relative">...</element>
Example:
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <center> <h1 class="text-red-600 text-5xl font-bold"> Tutorial and Example </h1> <b>Position Class - Tailwind CSS </b> <div class="static text-left p-2 m-2 bg-red-200 h-48"> <p class="font-bold">Static parent</p> <div class="relative p-2 inline-block bg-red-500"> <p>Relative child</p> </div> <div class="relative p-2 inline-block bg-red-600"> <p>Relative Sibling child</p> </div> </div> </center> </body> </html>
Output:
sticky class
This class is utilized to set the place/position of an element as relative until it passes a specific threshold, then, at that point, it regards it as fixed until its parent is off-screen.
Syntax
<element class="sticky">...</element>
Example:
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <center> <h1 class="text-red-600 text-5xl font-bold"> Tutorial and Example </h1> <b>Position Class - Tailwind CSS </b> <div class="w-3/4 bg-red-200 h-24 overflow-auto"> <div> <div class="p-2 sticky top-0 bg-red-500 text-right"> Sticky Heading - 1 </div> <p class="py-4"> How frequently were you baffled while paying special attention to a decent assortment of programming/calculation/inquiries questions? What did you expect and what did you get? This entrance has been made to give elegantly composed, very much idea and well-clarified answers for chosen questions. </p> </div> <div> <div class="p-2 sticky top-0 bg-red-500 text-right"> Sticky Heading - 2 </div> <p class="py-4"> How frequently were you baffled while paying special attention to a decent assortment of programming/calculation/inquiries questions? What did you expect and what did you get? This entrance has been made to give elegantly composed, very much idea and well-clarified answers for chosen questions. </p> </div> <div> <div class="p-2 sticky top-0 bg-red-500 text-right"> Sticky Heading - 3 </div> <p class="py-4"> How frequently were you baffled while paying special attention to a decent assortment of programming/calculation/inquiries questions? What did you expect and what did you get? This entrance has been made to give elegantly composed, very much idea and well-clarified answers for chosen questions. </p> </div> </div> </center> </body> </html>
Output (while scrolling the scrollbar we will see output like below):
