Tailwind Position
In this article, we’ll explore the various Tailwind position classes and how they can be used to position elements on a webpage.
Tailwind CSS provides classes for positioning elements – An element’s position is set using the position class.
It is possible to use these classes to control the position and behavior of elements on a page.
By precisely positioning elements on a web page, you can create complex layouts and designs.
Table Of Content-
Tailwind Position Classes
| Classes | Overview |
| static | This class sets the position attribute of an element to static. All elements have this position value as their default. |
| fixed | Using this class the position value of an element is set to fixed. Element positions are relative to the viewport, so even if the user scrolls, the element stays in the same spot. |
| absolute | In this case, the position value of an element is defined as absolute. The position of an element is determined by its nearest ancestor. Element positions are relative to the document if no ancestor has a position other than static. |
| relative | An element’s position value is set as relative using this class. In this case, it is positioned relative to its normal position on the page. |
| sticky | This class is used for specifying the position of an element as sticky. The element can be positioned relative to its normal position in the document flow until a certain scroll point is reached, at which point it is fixed to the viewport. |
Syntax
<element class="static">...</element>
Tailwind Positions: Static & Relative
The default position for an element in HTML is static. This means that the element will be positioned based on its place in the HTML document.
Tailwind provides a class for static positioning, called static. This class can be used to override any other positioning classes that might be applied to an element.
Relative positioning is a type of positioning where an element is positioned relative to its normal position in the HTML document.
Tailwind provides a class for relative positioning, called relative.
This class can be used to move an element up, down, left, or right from its original position.
Below example demonstrates the usage of static and relative position classes in Tailwind:
Example:
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="m-3 text-center">
<h1 class="text-gray-700 text-2xl font-semibold">
MrExamples
</h1>
<p class="my-2 font-semibold">Position class in Tailwind CSS</p>
<div class="mt-4 bg-gray-200 w-full relative h-28 overflow-auto font-medium">
<p class="font-medium mb-4">Using static class</p>
Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Fusce a eros eget quam porta lobortis.
<div class="w-fit static bg-gray-500 py-1 px-2">Static child</div>
Aenean nec finibus nunc. Sed aliquet massa ut consequat semper.
Etiam eu diam sed sapien hendrerit blandit. Nullam vehicula nisi
a nulla dignissim commodo. Donec sed tempor risus, eu varius erat.
Nam vel nulla risus. Vivamus ornare convallis tincidunt. Quisque
in aliquam velit. Morbi scelerisque volutpat orci, ac viverra
nisl semper eget.
</div>
<div class="mt-4 bg-gray-200 w-full relative h-28 overflow-auto font-medium">
<p class="font-medium mb-4">Using relative class</p>
Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Fusce a eros eget quam porta lobortis.
<div class="w-fit relative left-8 top-2 bg-gray-500 py-1 px-2">Relative child</div>
Aenean nec finibus nunc. Sed aliquet massa ut consequat semper.
Etiam eu diam sed sapien hendrerit blandit. Nullam vehicula nisi
a nulla dignissim commodo. Donec sed tempor risus, eu varius erat.
Nam vel nulla risus. Vivamus ornare convallis tincidunt. Quisque
in aliquam velit. Morbi scelerisque volutpat orci, ac viverra
nisl semper eget.
</div>
</body>
</html>
Tailwind Positions: Absolute – Fixed – Sticky
Absolute positioning is a type of positioning where an element is positioned relative to its nearest positioned ancestor.
If there is no positioned ancestor, the element will be positioned relative to the HTML document.
Tailwind provides a class for absolute positioning, called absolute.
This class can be used to move an element to a specific position on the webpage.
For instance:
<img src="mrexample.png" class="absolute top-0 right-0">
Fixed positioning is a type of positioning where an element is positioned relative to the viewport.
This means that the element will stay in the same position on the webpage, even if the user scrolls.
Tailwind provides a class for fixed positioning, called fixed.
This class can be used to create sticky navigation bars or other fixed elements on a webpage.
For example:
<nav class="fixed top-0 left-0 w-full"> This navigation bar will be fixed to the top of the viewport. </nav>
Note: It’s important to consider the accessibility of your website, and ensure that your positioning doesn’t interfere with assistive technologies like screen readers.
Sticky positioning is a type of positioning where an element is positioned based on the user’s scroll position.
When the user scrolls to a certain point, the element will stick to the top or bottom of the viewport.
Tailwind provides a class for sticky positioning, called sticky.
This class can be used to create sticky headers or other elements on a webpage.
The following example focuses on implementing the absolute, fixed and sticky classes in Tailwind:
Example:
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="m-3 text-center">
<h1 class="text-gray-700 text-2xl font-semibold">
MrExamples
</h1>
<p class="my-2 font-semibold">Position class in Tailwind CSS</p>
<div class="mt-4 bg-gray-200 w-full relative h-28 overflow-auto font-medium">
<p class="font-medium mb-4">Using absolute class</p>
Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Fusce a eros eget quam porta lobortis.
<div class="w-fit absolute top-0 bg-gray-500 py-1 px-2">Absolute child</div>
Aenean nec finibus nunc. Sed aliquet massa ut consequat semper.
Etiam eu diam sed sapien hendrerit blandit. Nullam vehicula nisi
a nulla dignissim commodo. Donec sed tempor risus, eu varius erat.
Nam vel nulla risus. Vivamus ornare convallis tincidunt. Quisque
in aliquam velit. Morbi scelerisque volutpat orci, ac viverra
nisl semper eget.
</div>
<div class="mt-6 bg-gray-200 w-full relative h-28 overflow-auto font-medium">
<p class="font-medium mb-4">Using fixed class</p>
Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Fusce a eros eget quam porta lobortis.
<div class="w-fit fixed bg-gray-500 py-1 px-2">Fixed child</div>
Aenean nec finibus nunc. Sed aliquet massa ut consequat semper.
Etiam eu diam sed sapien hendrerit blandit. Nullam vehicula nisi
a nulla dignissim commodo. Donec sed tempor risus, eu varius erat.
Nam vel nulla risus. Vivamus ornare convallis tincidunt. Quisque
in aliquam velit. Morbi scelerisque volutpat orci, ac viverra
nisl semper eget.
</div>
<div class="mt-6 bg-gray-200 w-full relative h-28 overflow-auto font-medium">
<p class="font-medium mb-4">Using sticky class</p>
Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Fusce a eros eget quam porta lobortis.
<div class="w-fit sticky top-0 bg-gray-500 py-1 px-2">Sticky child</div>
Aenean nec finibus nunc. Sed aliquet massa ut consequat semper.
Etiam eu diam sed sapien hendrerit blandit. Nullam vehicula nisi
a nulla dignissim commodo. Donec sed tempor risus, eu varius erat.
Nam vel nulla risus. Vivamus ornare convallis tincidunt. Quisque
in aliquam velit. Morbi scelerisque volutpat orci, ac viverra
nisl semper eget.
</div>
</body>
</html>
Important: Tailwind positioning can be tricky, and it’s important to test your website on different screen sizes to ensure that your elements are positioned correctly.
Conclusion
Tailwind positioning classes make it easy to create professional-looking web designs without having to write custom CSS.
With a little practice, you can use these classes to create stunning and responsive layouts for your websites.
We value your feedback.
+1
+1
+1
+1
+1
+1
+1
