Specifies how an element is positioned on the screen.
| Class | Properties |
|---|---|
| static | position: static; |
| fixed | position: fixed; |
| relative | position: relative; |
| absolute | position: absolute; |
| sticky | position: sticky; |
A static positioned element is displayed according to the flow of the page and does not get affected by the top, left, right and bottom properties.
Static
<div class="relative">
<div class="static bg-primary-100 p-4 border-round text-gray-800" style="min-width: 300px; min-height: 150px;">
<p class="font-bold text-gray-900">Static</p>
<div class="absolute bottom-0 left-0 bg-primary border-round p-4 font-bold " style="min-width: 120px; min-height: 70px">
Absolute
</div>
</div>
</div>
A fixed element is positioned relative to the viewport and always located in the same position even when the page is scrolled.
<div class="overflow-hidden" style="height: 250px">
<div class="relative bg-primary border-round border-1 border-primary-500" style="height: 200px">
<div class="absolute top-0 left-0 px-4 py-3 w-full font-bold">
Fixed
</div>
<div class="absolute overflow-auto surface-overlay mt-6 p-4 line-height-3" style="height: 150px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Vitae sapien pellentesque habitant morbi tristique senectus et netus. Vitae proin sagittis nisl rhoncus mattis.
Maecenas pharetra convallis posuere morbi leo urna molestie. At in tellus integer feugiat scelerisque.
Adipiscing elit duis tristique sollicitudin nibh sit amet commodo. Luctus accumsan tortor posuere ac ut.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Vitae sapien pellentesque habitant morbi tristique senectus et netus. Vitae proin sagittis nisl rhoncus mattis.
Maecenas pharetra convallis posuere morbi leo urna molestie. At in tellus integer feugiat scelerisque.
Adipiscing elit duis tristique sollicitudin nibh sit amet commodo. Luctus accumsan tortor posuere ac ut.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Vitae sapien pellentesque habitant morbi tristique senectus et netus. Vitae proin sagittis nisl rhoncus mattis.
Maecenas pharetra convallis posuere morbi leo urna molestie. At in tellus integer feugiat scelerisque.
Adipiscing elit duis tristique sollicitudin nibh sit amet commodo. Luctus accumsan tortor posuere ac ut.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Vitae sapien pellentesque habitant morbi tristique senectus et netus. Vitae proin sagittis nisl rhoncus mattis.
Maecenas pharetra convallis posuere morbi leo urna molestie. At in tellus integer feugiat scelerisque.
Adipiscing elit duis tristique sollicitudin nibh sit amet commodo. Luctus accumsan tortor posuere ac ut.
</div>
</div>
</div>
A relative positioned element is displayed relative to its original position. Setting the top, left, right and bottom properties can be used to adjust the position of the element.
<div class="relative">
<div class="relative bg-primary-100 p-4 border-round font-bold text-gray-800" style="min-width: 300px; min-height: 160px;">Relative
<div class="absolute bottom-0 left-0 bg-primary p-4 font-bold border-round" style="min-width: 120px; min-height: 70px">
Absolute
</div>
</div>
</div>
A fixed element is positioned relative to the viewport and always located in the same position even when the page is scrolled.
Relative
Static
Relative
Static
<div class="mb-4">
<div class="relative bg-primary-100 border-round p-4 font-bold text-gray-800">
<p class="mt-0">Relative</p>
<div class="static bg-primary-200 border-round p-4 font-bold text-gray-800" style="min-width: 300px; min-height: 150px;">
<p class="mt-0">Static</p>
<div class="static bottom-0 left-0 bg-primary border-round p-4 font-bold " style="min-width: 120px; min-height: 70px">
Static
</div>
</div>
</div>
</div>
<div class="relative bg-primary-100 border-round p-4 font-bold text-gray-800">
<p class="mt-0">Relative</p>
<div class="static bg-primary-200 border-round p-4 font-bold text-gray-800" style="min-width: 300px; min-height: 150px;">
<p class="mt-0">Static</p>
<div class="absolute bottom-0 left-0 bg-primary border-round p-4 font-bold " style="min-width: 120px; min-height: 70px">
Dynamic
</div>
</div>
</div>
A sticky element is dynamically positioned based on the scroll position and toggles between the relative and fixed behavior.
<div class="overflow-hidden">
<div class="overflow-auto border-round border-1 border-primary-500" style="height: 300px">
<div>
<div class="sticky top-0 font-bold bg-primary p-4">
Sticky Title 1
</div>
<p class="surface-overlay p-4 m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Vitae sapien pellentesque habitant morbi tristique senectus et netus. Vitae proin sagittis nisl rhoncus mattis.
Maecenas pharetra convallis posuere morbi leo urna molestie. At in tellus integer feugiat scelerisque.
Adipiscing elit duis tristique sollicitudin nibh sit amet commodo. Luctus accumsan tortor posuere ac ut.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Vitae sapien pellentesque habitant morbi tristique senectus et netus. Vitae proin sagittis nisl rhoncus mattis.
Maecenas pharetra convallis posuere morbi leo urna molestie. At in tellus integer feugiat scelerisque.
Adipiscing elit duis tristique sollicitudin nibh sit amet commodo. Luctus accumsan tortor posuere ac ut.
</p>
</div>
<div>
<div class="sticky top-0 font-bold bg-primary p-4">
Sticky Title 2
</div>
<p class="surface-overlay p-4 m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Vitae sapien pellentesque habitant morbi tristique senectus et netus. Vitae proin sagittis nisl rhoncus mattis.
Maecenas pharetra convallis posuere morbi leo urna molestie. At in tellus integer feugiat scelerisque.
Adipiscing elit duis tristique sollicitudin nibh sit amet commodo. Luctus accumsan tortor posuere ac ut.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Vitae sapien pellentesque habitant morbi tristique senectus et netus. Vitae proin sagittis nisl rhoncus mattis.
Maecenas pharetra convallis posuere morbi leo urna molestie. At in tellus integer feugiat scelerisque.
Adipiscing elit duis tristique sollicitudin nibh sit amet commodo. Luctus accumsan tortor posuere ac ut.
</p>
</div>
<div>
<div class="sticky top-0 font-bold bg-primary p-4">
Sticky Title 3
</div>
<p class="surface-overlay p-4 m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Vitae sapien pellentesque habitant morbi tristique senectus et netus. Vitae proin sagittis nisl rhoncus mattis.
Maecenas pharetra convallis posuere morbi leo urna molestie. At in tellus integer feugiat scelerisque.
Adipiscing elit duis tristique sollicitudin nibh sit amet commodo. Luctus accumsan tortor posuere ac ut.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Vitae sapien pellentesque habitant morbi tristique senectus et netus. Vitae proin sagittis nisl rhoncus mattis.
Maecenas pharetra convallis posuere morbi leo urna molestie. At in tellus integer feugiat scelerisque.
Adipiscing elit duis tristique sollicitudin nibh sit amet commodo. Luctus accumsan tortor posuere ac ut.
</p>
</div>
<div>
<div class="sticky top-0 font-bold bg-primary p-4">
Sticky Title 4
</div>
<p class="surface-overlay p-4 m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Vitae sapien pellentesque habitant morbi tristique senectus et netus. Vitae proin sagittis nisl rhoncus mattis.
Maecenas pharetra convallis posuere morbi leo urna molestie. At in tellus integer feugiat scelerisque.
Adipiscing elit duis tristique sollicitudin nibh sit amet commodo. Luctus accumsan tortor posuere ac ut.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Vitae sapien pellentesque habitant morbi tristique senectus et netus. Vitae proin sagittis nisl rhoncus mattis.
Maecenas pharetra convallis posuere morbi leo urna molestie. At in tellus integer feugiat scelerisque.
Adipiscing elit duis tristique sollicitudin nibh sit amet commodo. Luctus accumsan tortor posuere ac ut.
</p>
</div>
<div>
<div class="sticky top-0 font-bold bg-primary p-4">
Sticky Title 5
</div>
<p class="surface-overlay p-4 m-0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Vitae sapien pellentesque habitant morbi tristique senectus et netus. Vitae proin sagittis nisl rhoncus mattis.
Maecenas pharetra convallis posuere morbi leo urna molestie. At in tellus integer feugiat scelerisque.
Adipiscing elit duis tristique sollicitudin nibh sit amet commodo. Luctus accumsan tortor posuere ac ut.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Vitae sapien pellentesque habitant morbi tristique senectus et netus. Vitae proin sagittis nisl rhoncus mattis.
Maecenas pharetra convallis posuere morbi leo urna molestie. At in tellus integer feugiat scelerisque.
Adipiscing elit duis tristique sollicitudin nibh sit amet commodo. Luctus accumsan tortor posuere ac ut.
</p>
</div>
</div>
</div>
Responsive alternatives are available for customizations based on screen size. Add the responsive breakpoint keyword followed by a semi-colon as a prefix such as md:absolute to use a responsive class.
| Class | Description |
|---|---|
| sm: | small screens e.g. phones |
| md: | medium screens e.g. tablets |
| lg: | large screens e.g. notebooks |
| xl: | larger screens e.g monitors |
Static
<div class="relative md:p-5">
<div class="static bg-primary-100 font-bold border-round p-4 text-gray-800" style="min-width: 300px; min-height: 200px;">
<p class="mt-0">Static</p>
<div class="static md:absolute bottom-0 left-0 bg-primary border-round font-bold p-4" style="min-width: 120px; min-height: 70px">
Absolute on medium screens / Static on small screens
</div>
</div>
</div>